css实现流动的虚线边框

最新推荐文章于 2025-03-20 11:21:26 发布

未来可期xm

最新推荐文章于 2025-03-20 11:21:26 发布

阅读量697

点赞数 3

文章标签： css 前端 css3

本文链接：https://blog.youkuaiyun.com/weixin_44231085/article/details/138337498

版权

.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;
  }
}