在我们日常的开发中,有时候有的图片,布局块需要加一下边框运动效果,对于这些效果,我们可以使用CSS3动画属性animation,再配合css的一些技巧制作出来。下面是收藏的一些效果实例。
1、边框流动效果
html:
css:
.css3-1{
width: 200px;
height: 200px;
position: relative;
}
.css3-1::after,.css3-1::before,.css3-1 span{
position:absolute;
left: 0px;
top: 0;
bottom: 0;
right: 0;
}
.css3-1 span{
background: #eee;
line-height: 200px;
text-align: center;
}
.css3-1::after,.css3-1::before{
content: '';
box-shadow:inset 0 0 0 2px #42b983;
animation:clipAnimate 10s linear infinite;
z-index: 11
}
.css3-1::before{
animation-delay:-5s
}
@keyframes clipA