css-虚线边框滚动效果

Ocean 发布于2019-08-30 10:48 / 1201人阅读

摘要：新建一个，解决在垂直方向上折叠的问题通过线性渐变以及画出虚线，然后再通过将其移动到四边。参考张哥虚线边框教程

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

基本HTML


  测试测试

Easy-way

通过背景图片实现。

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

.box {
  width: 100px;
  height: 100px;
  position: relative;
  background: url(https://www.zhangxinxu.com/study/image/selection.gif);
  p {
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    margin: auto;
    height: calc(100% - 2px);
    width: calc(100% - 2px);
    background-color: #fff;
  }
}

repeating-linear-gradient

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

.box {
  width: 100px;
  height: 100px;
  background: repeating-linear-gradient(
    135deg,
    transparent,
    transparent 4px,
    #000 4px,
    #000 8px
  );
  overflow: hidden;                // 新建一个BFC，解决margin在垂直方向上折叠的问题
  animation: move 1s infinite linear;
  p {
    height: calc(100% - 2px);
    margin: 1px;
    background-color: #fff;
  }
}
@keyframes 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 {
  from {
  }
  to {
    background-position: 0 -12px, 100% 12px, 12px 0, -12px 100%;
  }
}

linear-gradient&&mask

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

这里同样可以使用mask来实现相同的动画，并且可以实现虚线边框渐变色这种效果，与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-size: 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、js、html、vue等等等，听得我瑟瑟发抖。

然后问了个简单的如何垂直居中，答曰：用flex；再问怎么用flex，答：不太了解；问还有什么方式，答曰：transform；再问为何transform，答：不太了解。。。

等等等，问了许多基础的东西，大多不了解，更不用说vue的相关原理，diff算法之流。

最后问期望薪资，答：已有18k的offer，期望不要低于18k。

是我不了解行情了，还是现在压根就不是寒冬了，拿着微薄薪水的我求个内推～～南京或杭州地区。

个人博客求友链～

花里胡哨电子简历～有时间的话可以一看。

参考

张哥虚线边框

mask教程

云服务器 GPU云服务器 html边框样式虚线 html虚线圆点边框点击边框效果js 视差滚动效果

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/114584.html

css-secrets (css揭秘) 知识点目录，值得深入学习！

摘要：通过模糊来弱化背景和滚动提示使用两层背景，控制交互式的图片对比控件范围输入控件方式书中有很详细的解答提醒自己要回顾。 1. 第一章 css编码技巧第二章边框与背景半透明边框 hsla 多重边框 box-shadow outline 灵活的背景定位 background-position css3该属性可以指定偏移量，////bac...

DevWiki 2019-08-30 15:56 评论0 收藏0
CSS基础汇总

摘要：默认占满整个页面宽度，如果设置了指定宽度，则会用填充剩下的部分。关于浮动的两个特点浮动的框可以向左或向右移动，直到它的外边缘碰到包含框或另一个浮动框的边框为止。允许浮动元素出现在两侧。CSS介绍 CSS（CascadingStyleSheet，层叠样式表)定义如何显示HTML元素。当浏览器读到一个样式表，它就会按照这个样式表来对文档进行格式化（渲染）。 CSS语法 CSS实例每个CSS样...

番茄西红柿 2019-04-23 13:41 评论0 收藏0
前端页面总结

摘要：重叠元素元素的定位与文档流无关，所以它们可以覆盖页面上的其它元素属性指定了一个元素的堆叠顺序哪个元素应该放在前面，或后面一个元素可以有正数或负数的堆叠顺序具有更高堆叠顺序的元素总是在较低的堆叠顺序元素的前面。元素的默认值，没有定位，遵循正常的文档流对象。静态定位的元素不会受到 top, bottom, left, right影响。 fixed 定位元素的位置相对于浏览器窗口是固定位...

番茄西红柿 2019-04-22 16:12 评论0 收藏0
前端css

摘要：格式如下外部样式外部样式就是将写在一个单独的文件中，然后在页面进行引入即可。浮动元素会生成一个块级框，而不论它本身是何种元素。允许浮动元素出现在两侧。CSS介绍 CSS（Cascading Style Sheet，层叠样式表)定义如何显示HTML元素。当浏览器读到一个样式表，它就会按照这个样式表来对文档进行格式化（渲染）。 CSS语法 CSS实例每个CSS样式由两个组成部分：选择器和声明...

番茄西红柿 2019-04-23 11:41 评论0 收藏0
前端学习之路之CSS （四）

摘要：块元素的例子内联元素只需要必要的宽度，不强制换行。内联元素的例子如何改变一个元素显示可以更改内联元素和块元素把列表项显示为内联元素把元素作为块元素定位五大属性定位元素的默认值，即没有定位，元素出现在正常的流中静态定位的元素不会受到影响。 Infi-chu: http://www.cnblogs.com/Infi-chu/ CSS盒子模型概念：CSS盒模型本质上是一个盒子，封装周围...

hosition 2019-04-23 13:19 评论0 收藏0