.element {
width: 850px;
height: 195px;
color: #000;
position: absolute;
left: 809px;
top: 373px;
z-index: 2;
background: linear-gradient(90deg, #a84d31 50%, transparent 0) repeat-x,
linear-gradient(90deg, #a84d31 50%, transparent 0) repeat-x,
linear-gradient(0deg, #a84d31 50%, transparent 0) repeat-y,
linear-gradient(0deg, #a84d31 50%, transparent 0) repeat-y;
background-size: 16px 3px, 16px 3px, 3px 16px, 3px 16px;
background-position: 0 0, 0 100%, 0 0, 100% 0;
animation: linearGradientMove 0.3s infinite linear;
}
// 虚线动画
@keyframes linearGradientMove {
100% {
background-position: 16px 0, -16px 100%, 0 -16px, 100% 16px;
}
}
css实现流动的虚线边框
最新推荐文章于 2024-05-30 11:17:16 发布