转自:张鑫旭的博客
一、虚线边框滚动动画
兼容IE10+
<div class="box">
<div class="content">内容占位</div>
</div>
.box {
width: 200px;
background: repeating-linear-gradient(135deg, transparent, transparent 3px, #000 3px, #000 8px);
animation: shine 1s infinite linear;
overflow: hidden;
}
.content {
height: 128px;
margin: 1px;
padding: 10px;
background-color: #fff;
}
@keyframes shine {
0% {
background-position: -1px -1px;
}
100% {
background-position: -12px -12px;
}
}
二、实线边框loading动画
兼容IE10+
<div class="box"></div>
.box {
height: 96px;
width: 128px;
display: inline-block;
padding: 10px;
position: relative;
text-align: center;
}
.box::before {
content: '';
position: absolute;
left: 0;
top: 0;
right: 0;
bottom: 0;
border: 2px solid #cd0000;
animation: borderAround 1.5s infinite linear;
}
@keyframes borderAround {
0%,
100% {
clip: rect(0 148px 2px 0);
}
25% {
clip: rect(0 148px 116px 146px);
}
50% {
clip: rect(114px 148px 116px 0);
}
75% {
clip: rect(0 2px 116px 0);
}
}