html实现流转效果,css3实现流动的边框效果代码
css3实现流动的边框效果代码
最近在前端⽹看到很多⼈在讨论css3动画和canvas，看到⼀篇关于css3流动边框的⽂章，我觉得它适⽤于个⼈中⼼的头像上⾯，于是便按照案例的思路也写了⼀遍，demo如下：html>
css3 流动的边框
.avatar{
background-color: #f2f2f2;
width: 90px;
height: 90px;
display: inline-block;
margin: 40px;
position: relative;
z-index: 3;
}
.a1::before, .a2::before, .a2::after{
content: '';
position: absolute;
left: 0;
top: 0;
bottom: 0;
canvas动画right: 0;
border: 2px solid red;
margin: -5px;
z-index: -1;
}
.a1::before, .a2::before{
-webkit-animation: lineA 4s linear infinite;
animation: lineA 4s linear infinite;
}
.a2::after{
-webkit-animation: lineB 4s linear infinite;
animation: lineB 4s linear infinite;
}
@-webkit-keyframes lineA{
0%,100%{clip:rect(0,100px,2px,0)}
25%{clip:rect(0,2px,100px,0)}
50%{clip:rect(98px,100px,100px,0)}
75%{clip:rect(0,100px,100px,98px)}
}
@keyframes lineA{
0%,100%{clip:rect(0,100px,2px,0)}
25%{clip:rect(0,2px,100px,0)}
50%{clip:rect(98px,100px,100px,0)}
75%{clip:rect(0,100px,100px,98px)}
}
@-webkit-keyframes lineB{
0%,100%{clip:rect(98px,100px,100px,0)} 25%{clip:rect(0,100px,100px,98px)}
50%{clip:rect(0,100px,2px,0)}
75%{clip:rect(0,2px,100px,0)}
}
@keyframes lineB{
0%,100%{clip:rect(98px,100px,100px,0)} 25%{clip:rect(0,100px,100px,98px)}
50%{clip:rect(0,100px,2px,0)}
75%{clip:rect(0,2px,100px,0)}
}

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。