最近写了几个页面都用到css动画,以及很多before,after伪类。在此记录一下成果。
css边框循环动画,页面效果如下:
1、沿着边框动画的图形使用before,after伪类写的。当时想用切图来写,后来考虑到优化,就用了css来写。具体代码如下:
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;