<div class="item"><div>
@keyframes linearGradientMove {
100% {
background-position: 10px 0, -10px 100%, 0 -10px, 100% 10px;
}
}
.item {
width: 200px;
height: 100px;
border-width: 5px;
margin: 15%;
// 渐变轴为90度,#333 设置占了图片的 50%。 透明部分占了50%
background:
linear-gradient(90deg, #333 50%, transparent 50%) repeat-x,
linear-gradient(90deg, #333 50%, transparent 50%) repeat-x,
linear-gradient(0deg, #333 50%, transparent 50%) repeat-y,
linear-gradient(0deg, #333 50%, transparent 50%) repeat-y;
// 设置背景图片大小
background-size: 10px 2px, 10px 2px, 2px 10px, 2px 10px;
// 为每一个背景图片设置初位置
background-position: 0 0, 0 100%, 0 0, 100% 0;
animation: linearGradientMove 0.5s linear infinite;
}
View Compiled
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.