如gif动图展示，这是一个边框动画效果，本次文章讲解读拆分如何实现这个边框动画效果
一、原理介绍
1、动画部分
利用css3的animation来实现动画效果
2、边框部分
利用css3中伪元素::before来实现，但是需要注意z-index的设置
二、实现过程
1、基本结构
不需要额外的元素，html中就是最简单的一个class为box的div元素，后面我们将对这个div进行效果制作
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>动态渐变边框</title>
<link rel="stylesheet" href="./style.css">
</head>
<body>
<div class="box">
动态渐变边框
</div>
</body>
</html>
2、基本css
将body背景设置为#313131，box这个div设置为400*300的一个矩形，并设置背景颜色#222，div内元素通过flex居中
html,
body{
height: 100vh;
width: 100vw;
display: flex;
align-items: center;
justify-content: center;
}
body{
background-color: #313131;
}
.box {
width: 400px;
height: 300px;
background-color: #222;
border-radius: 10px;
display: flex;
align-items: center;
justify-content: center;
font-size: 20px;
color: #fff;
font-weight: 800;
}
3、核心步骤
接下来就是关键的代码了，首先设置box这个div为相对定位，为了便于伪元素before中的内容进行绝对定位时范围限制在box这个div内。
边框部分通过calc这个方法把伪元素before的尺寸设置为比本体box这个div大40像素，再通过left、top设置为居中，因为伪元素before是绝对定位，现在就能展示出边框的效果了。
动画部分先通过linear-gradient来设置background-image来设置一个渐变色，background-size的放大效果能让动画更明显。最后再通过一个animation的css3动画让背景颜色动起来。
至此一个边框动画效果就完成了，可以修改这个渐变类型实现更多的边框动画效果。
.box {
position: relative; /* 设置相对定位以后，子元素中的绝对定位范围会在该div内 */
}
.box::before {
content: "";
position: absolute;
left: -20px;
top: -20px;
width: calc(100% + 40px); /* calc方法可以用来动态计算长度 */
height: calc(100% + 40px);
border-radius: 10px;
z-index: -1;
background-image: linear-gradient(135deg,
#ff0000,
#ff7f00,
#ffff00,
#00ff00,
#00ffff,
#0000ff,
#8b00ff
);
background-size: 400%; /* 背景放大，动画更明显 */
animation: animate_box 5s linear infinite;
}
@keyframes animate_box {
0%,
100% {
background-position: 0%, 50%;
}
50% {
background-position: 100%, 50%;
}
}
注意点
1、.box需要设置为相对定位，才能让子元素的绝对定位在父元素范围内。 2、before伪元素中需要设置z-index: -1;并且.box中不能设置z-index,否则before伪元素将盖住.box的内容 3、before伪元素中一定需要写content，就算为空也需要写上content: "" 4、calc方法可以增加组件的适配性，直接根据父元素的尺寸来相对变化
最后
分享技术干货，欢迎关注公众号：明同学聊技术（ID：xuminjun2023）
需要源码的可以在公众号回复：a001
