css实现虚线边框滚动效果的实例代码

常常看到一种酷炫的效果，鼠标hover一片区域后，区域显示出虚线边框，并且还有线条动画，那么这种效果具体是怎么实现的呢，本文提供了 几种 思路仅供参考。

基本HT ML

<div class="box">
  <p>测试测试</p>
</div>

Easy-way

通过背景图片实现。

p得垂直居中哦，还记得如何垂直居中吗？详见另一篇博客～

.box {
  width: 100px;
  h ei ght: 100px;
  pos IT ion: relative;
  background: url(https://www.zhangxinxu .COM /study/image/selection.gif);
  p {
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    m arg in: auto;
    height: calc(100% - 2px);
    width: calc(100% - 2px);
    background-color:  # fff;
  }
}

re PE ating-linear-gra die nt

135度repeating线性渐变，p撑开高度， 白色 背景覆盖外层div渐变。

.box {
  width: 100px;
  height: 100px;
  background: repeating-linear-gradient(
    135 deg ,
    transparent,
    transparent 4px,
    #000 4px,
    #000 8px
  );
  overflow: hidden;                // 新建一个B fc ，解决mar gin 在垂直 方向 上折叠的问题
  animation: move 1s infinite linear;
  p {
    height: calc(100% - 2px);
    margin: 1px;
    background-color: #fff;
  }
}
@keyfr am es move {
   From  {
    background-position: -1px;
  }
  to {
    background-position: -12px;
  }
}

linear-gradient && background

通过线性渐变以及 background-size 画出虚线，然后再通过background-position将其移动到四边。这种方式比较好的地方在于可以分别设置四条边的样式以及动画的方向，细心的 同学 应该 会发现上一种方式的动画并不是顺时针 或者 逆时针方向的。

.box {
  width: 100px;
  height: 100px;
  background: linear-gradient(0deg, transparent 6px, #e60a0a 6px) repeat-y,
    linear-gradient(0deg, transparent 50%, #0f0ae8 0) repeat-y,
    linear-gradient(90deg, transparent 50%, #09f32f 0) repeat-x,
    linear-gradient(90deg, transparent 50%, #fad648 0) repeat-x;
  background- Size:  1px 12px, 1px 12px, 12px 1px, 12px 1px;
  background-position: 0 0, 100% 0, 0 0, 0 100%;
  animation: move2 1s infinite linear;
  p {
    margin: 1px;
  }
}
@keyframes move2 {
  f rom  {
  }
  to {
    background-position: 0 -12px, 100% 12px, 12px 0, -12px 100%;
  }
}

linear-gradient&am p; & ;m ask

mask属性规范已经进入候选推荐规范之列，会说以后进入既定规范标准已经是板上钉钉的事情，大家可以放心学习，将来必有用处。

这里同样可以使 用M ask来实现相同的动画，并且可以实现虚线边框渐变色这种效果，与background不同的是mask需要在中间加上 一块 不透明的遮罩，不然p元素的内容会被遮盖住。

.box {
  width: 100px;
  height: 100px;
  background: linear-gradient(0deg, #f0e, #fe0);
  - webkit -mask: linear-gradient(0deg, transparent 6px, #e60a0a 6px) repeat-y,
    linear-gradient(0deg, transparent 50%, #0f0ae8 0) repeat-y,
    linear-gradient(90deg, transparent 50%, #09f32f 0) repeat-x,
    linear-gradient(90deg, transparent 50%, #fad648 0) repeat-x,
    linear-gradient(0deg, #fff, #fff) no-repeat;        // 这里不透明颜色随便写哦
  -webkit-mask -s ize: 1px 12px, 1px 12px, 12px 1px, 12px 1px, 98px 98px;
  -webkit-mask-position: 0 0, 100% 0, 0 0, 0 100%, 1px 1px;
  overflow: hidden;
  animation: move3 1s infinite linear;
  p {
    height: calc(100% - 2px);
    margin: 1px;
    background-color: #fff;
  }
}
@keyframes move3 {
  from {
  }
  to {
    -webkit-mask-position: 0 -12px, 100% 12px, 12px 0, -12px 100%, 1px 1px;
  }
}

具体demo点这里

总结

以上所述是小编给大家介绍的css实现虚线边框滚动效果的实例代码, 希望对大家有所帮助 ，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对网站的支持！
如果你 觉得 本文对你有帮助，欢迎 转载 ，烦请注明出处，谢谢！

总结

以上是 为你收集整理的 css实现虚线边框滚动效果的实例代码 全部内容，希望文章能够帮你解决 css实现虚线边框滚动效果的实例代码 所遇到的问题。

如果觉得 网站内容还不错， 推荐好友。

查看更多关于css实现虚线边框滚动效果的实例代码的详细内容...