6款好看的边框动画

边框效果1

代码

css

.div1 { width: 300px; height: 200px; position: relative; border: 1px solid #0b7ffe; } .div1::before,
.div1::after { content: ""; position: absolute; width: 30px; height: 30px; animation: div1Ani 1500ms infinite linear; } .div1::before { top: -5px; left: -5px; border-top: 1px solid #0b7ffe; border-left: 1px solid #0b7ffe; } .div1::after { right: -5px; bottom: -5px; border-bottom: 1px solid #0b7ffe; border-right: 1px solid #0b7ffe; } @keyframes div1Ani { 0% { width: 30px; height: 30px; } 50% { width: calc(100% + 9px); height: calc(100% + 9px); } 100% { width: 30px; height: 30px; } } 

html

<div class="div1"> 通过before，after设置对角两个div，并且设置对应的两个边框。
    hover改变before，after的大小，并设置过渡，达到最终效果  width: 300px; height: 200px; background: linear-gradient(90deg, #333 50%, transparent 0) repeat-x, linear-gradient(90deg, #333 50%, transparent 0) repeat-x, linear-gradient(0deg, #333 50%, transparent 0) repeat-y, linear-gradient(0deg, #333 50%, transparent 0) repeat-y; background-size: 10px 2px, 10px 2px, 2px 10px, 2px 10px; background-position: 0 0, 0 100%, 0 0, 100% 0; animation: div2Ani 500ms infinite linear; } @keyframes div2Ani { 100% { background-position: 10px 0, -10px 100%, 0 -10px, 100% 10px; } } 

html

<div class="div2"> 通过设置背景过渡颜色实现虚线，通过background-size控制虚线宽度大小。
    background-position指定4条背景的位置。
    通过动画设置background-position达到运动效果  width: 300px; height: 200px; position: relative; overflow: hidden; } .div3::after { content: ''; position: absolute; left: -50%; top: -50%; width: 200%; height: 200%; background-repeat: no-repeat; background-size: 50% 50%, 50% 50%; background-position: 0 0, 100% 0, 100% 100%, 0 100%; background-image: linear-gradient(#399953, #399953), linear-gradient(#fbb300, #fbb300), linear-gradient(#d53e33, #d53e33), linear-gradient(#377af5, #377af5); animation: div3Rotate 4s linear infinite; } .div3 > div { position: absolute; left: 5px; top: 5px; width: calc(100% - 10px); height: calc(100% - 10px); background: #ffffff; z-index: 2; padding: 20px; box-sizing: border-box; } @keyframes div3Rotate { 100% { transform: rotate(360deg); } } 

html

<div class="div3"> <div> 大盒子超出隐藏，利用伪类设置背景颜色，通过动画旋转，
        并在盒子里面设置一个遮罩层，遮罩层比大盒子小，露出边框达到效果  width: 300px; height: 200px; overflow: hidden; position: relative; } .div4::before { content: ''; position: absolute; left: -50%; top: -50%; width: 200%; height: 200%; background-color: #e5e3e3; background-repeat: no-repeat; background-position: 0 0; background-image: conic-gradient(transparent, #343434, transparent 30%); animation: div4Rotate 4s linear infinite; } .div4 > div { position: absolute; left: 5px; top: 5px; width: calc(100% - 10px); height: calc(100% - 10px); background: #ffffff; z-index: 2; padding: 20px; box-sizing: border-box; } @keyframes div4Rotate { 100% { transform: rotate(360deg); } } 

html

<div class="div4"> <div> 大盒子超出隐藏，利用伪类设置背景颜色过渡，通过动画旋转，
        并在盒子里面设置一个遮罩层，遮罩层比大盒子小，露出边框达到效果  width: 300px; height: 200px; position: relative; color: #fff; border: 2px solid gold; border-radius: 10px; background: #ffd700; transition: all .3s; } .div5::before { content: ""; position: absolute; top: -10px; left: -10px; right: -10px; bottom: -10px; border: 2px solid #ffd700; border-radius: 10px; animation: div5Ani 3s infinite linear; } .div5::after { content: ""; position: absolute; top: -10px; left: -10px; right: -10px; bottom: -10px; border: 2px solid #ffd700; border-radius: 10px; animation: div5Ani 3s infinite linear; } @keyframes div5Ani { 0%,
    100% { clip-path: inset(0 0 98% 0); } 25% { clip-path: inset(0 98% 0 0); } 50% { clip-path: inset(98% 0 0 0); } 75% { clip-path: inset(0 0 0 98%); } } .div5::after { animation: div5Ani 3s infinite -1.5s linear; } 

html

<div class="div5"> 通过clip-path属性，对伪类进行裁剪，而伪类是支持圆角边框的，通过规则的动画去裁剪，达到运动效果  width: 300px; height: 200px; position: relative; margin: auto; overflow: hidden; border: 5px solid; border-image: linear-gradient(45deg, gold, deeppink) 1; clip-path: inset(0px round 5px); animation: div6Ani 3s infinite linear; filter: hue-rotate(360deg); } @keyframes div6Ani { 0% { filter: hue-rotate(0deg); } 100% { filter: hue-rorate(360deg); } } 

html

<div class="div6"> 边框border-image属性，颜色过渡，设置过渡动画，色调旋转滤镜，裁剪圆角，达到最终效果