温馨提示×

温馨提示×

您好,登录后才能下订单哦!

密码登录×
登录注册×
其他方式登录
点击 登录注册 即表示同意《亿速云用户服务条款》

css如何实现虚线边框滚动效果

发布时间:2021-03-18 14:26:58 阅读:461 作者:小新 栏目:web开发
前端开发者测试专用服务器限时活动,0元免费领,库存有限,领完即止! 点击查看>>

这篇文章将为大家详细讲解有关css如何实现虚线边框滚动效果,小编觉得挺实用的,因此分享给大家做个参考,希望大家阅读完这篇文章后可以有所收获。

基本HTML

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

Easy-way

通过背景图片实现。

p得垂直居中哦,还记得如何垂直居中吗?详见另一篇博客~

.box {
  width100px;
  height100px;
  position: relative;
  backgroundurl(https://cache.yisu.com/upload/information/20210311/295/6111.gif);
  p {
    position: absolute;
    left0;
    top0;
    right0;
    bottom0;
    margin: auto;
    heightcalc(100% - 2px);
    widthcalc(100% - 2px);
    background-color#fff;
  }
}

repeating-linear-gradient

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

.box {
  width100px;
  height100px;
  backgroundrepeating-linear-gradient(
    135deg,
    transparent,
    transparent 4px,
    #000 4px,
    #000 8px
  );
  overflow: hidden;                // 新建一个BFC,解决margin在垂直方向上折叠的问题
  animation: move 1s infinite linear;
  p {
    heightcalc(100% - 2px);
    margin1px;
    background-color#fff;
  }
}
@keyframes move {
  from {
    background-position: -1px;
  }
  to {
    background-position: -12px;
  }
}

linear-gradient&&background

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

.box {
  width100px;
  height100px;
  backgroundlinear-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-size1px 12px1px 12px12px 1px12px 1px;
  background-position0 0100% 00 00 100%;
  animation: move2 1s infinite linear;
  p {
    margin1px;
  }
}
@keyframes move2 {
  from {
  }
  to {
    background-position0 -12px100% 12px12px 0, -12px 100%;
  }
}

linear-gradient&&mask

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

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

.box {
  width100px;
  height100px;
  backgroundlinear-gradient(0deg#f0e#fe0);
  -webkit-masklinear-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-size1px 12px1px 12px12px 1px12px 1px98px 98px;
  -webkit-mask-position0 0100% 00 00 100%1px 1px;
  overflow: hidden;
  animation: move3 1s infinite linear;
  p {
    heightcalc(100% - 2px);
    margin1px;
    background-color#fff;
  }
}
@keyframes move3 {
  from {
  }
  to {
    -webkit-mask-position0 -12px100% 12px12px 0, -12px 100%1px 1px;
  }
}

具体demo点这里

关于“css如何实现虚线边框滚动效果”这篇文章就分享到这里了,希望以上内容可以对大家有一定的帮助,使各位可以学到更多知识,如果觉得文章不错,请把它分享出去让更多的人看到。

亿速云「云服务器」,即开即用、新一代英特尔至强铂金CPU、三副本存储NVMe SSD云盘,价格低至29元/月。点击查看>>

向AI问一下细节

免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。

原文链接:https://www.jb51.net/css/671828.html

css
AI

开发者交流群×