css实现边框动画效果

最近写了几个页面都用到css动画，以及很多before,after伪类。在此记录一下成果。
css边框循环动画，页面效果如下：

1、沿着边框动画的图形使用before，after伪类写的。当时想用切图来写，后来考虑到优化，就用了css来写。具体代码如下：

 <i class="border-right-animate"></i> 

</div>

i.border-right-animate{

        display: block;
        height: 35px;
        width: 5px;
        background: #0b82ce;
        color: #0b82ce;
        position: absolute;
        top: 150px;
        right: -3px;
        -webkit-animation: borderMove 6s linear infinite;
        -o-animation: borderMove 6s linear infinite;
        animation: borderMove 6s linear infinite;
}

i.border-right-animate:before{

    content: ‘‘;
    display: block;
    height: 40px;
    width: 7px;
    background: #0b82ce;
    color: #0b82ce;
    position: absolute;
    top: -40px;
    left: -1px;
}

i.border-right-animate:after{
    content: ‘‘;
    display: block;
    height: 20px;
    width: 2px;
    background: #0b82ce;
    color: #0b82ce;
    position: absolute;
    top: 30px;
    left: 1px;
}

动画效果用的是css3的animation，我是在菜鸟教程网站上一边看教程一边做出的效果(http://www.runoob.com/css3/cs...;

我自己写的keyframes如下:

keyframes borderMove {
0% {

right: -2px;
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的作用是规定动画的过程。我的设计思路就是刚开始图形在右侧边框顶部，运行到一半时 图形就沿着边框移动到右侧边框的中间。如此循环。。

根据以上设计思路，就很容易写出边框的另外三个动画效果了。

原文地址：https://www.cnblogs.com/baimeishaoxia/p/12194465.html