CSS实现边框动画效果
时间：2023-04-02 18:13:52
HTML
最近写了几个使用CSS动画的页面，还有很多前后伪类。在这里记录结果。css边框循环动画，页面效果如下：1.沿边框动画的图形使用before和after伪类编写。当时想用切图来写，后来考虑优化，就用css来写。具体代码如下：
i.border-right-animate{display:block;高度：35px；宽度：5px；背景：#0b82ce；颜色：#0b82ce；位置：绝对；顶部：150px；右：-3px；-webkit-动画：borderMove6s线性无限；无穷;}i.border-right-animate:before{内容：'';显示：块；高度：40px；宽度：7px；背景：#0b82ce；颜色：#0b82ce；位置：绝对；:-1px;}i.border-right-animate:after{内容：'';显示：块；高度：20px；宽度：2px；背景：#0b82ce；颜色：#0b82ce；位置：绝对；顶部：30px；left:1px;}仔细看看沿边框动画的图形，它由三个矩形组成。所以设计思路是先写中间的矩形，也就是i标签的样式。然后用before和after写两边的矩形。动画效果使用css3动画。我是在菜鸟教程网站(http://www.runoob.com/css3/cs...;top:40px;}25%{right:-2px;top:25%;}50%{right:-2px;top:50%;}75%{right:-2px;top:75%;}100%{top:calc(100%-50px);right:-2px;}}@keyframes的作用是指定动画过程，我的设计思路是在右边框顶部开始图形，图形会移动运行到一半的时候沿着边框到右边框的中间，这个循环...根据上面的设计思路，很容易写出边框的另外三个动画效果。
