css3边框交替动画 |css 变量 定义

/*定义带有动画效果的边框*/
.anim-border {
border: 3px solid;
border-image: linear-gradient(to bottom, #000, #FFF) 10;
}
/*定义动画*/
@keyframes border-animation {
0% {
border-image-source: linear-gradient(to bottom, #000, #FFF);
}
25% {
border-image-source: linear-gradient(to right, #000, #FFF);
}
50% {
border-image-source: linear-gradient(to top, #000, #FFF);
}
75% {
border-image-source: linear-gradient(to left, #000, #FFF);
}
100% {
border-image-source: linear-gradient(to bottom, #000, #FFF);
}
}
/*应用动画*/
.anim-border:hover {
animation: border-animation 3s infinite;
}

以上代码中，大家定义了一个class为.anim-border的元素，并给它设置了一组不带动画效果的边框样式，并使用border-image属性来设置带有渐变效果的边框。接着大家定义了一个名为border-animation的动画，其中大家使用了5个不同的关键帧（0%，25%，50%，75%，100%）分别对应边框渐变的5个不同方向。

最后，大家把这个动画属性应用在.anim-border元素上，并设置它应该持续3秒钟，并无限重复播放。

大功告成！现在大家可以在hover时看到.anim-border元素的边框交替动画效果啦。