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


本文摘自PHP中文网,作者V,侵删。

我们先来看一下效果:

c25ccacebd5dffee5b23e3b3f29bdb6.png

实现代码如下:

HTML

1

2

3

<div class="box">

  <p>测试测试</p>

</div>

Easy-way

通过背景图片实现。

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

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

  }

}

(视频教程推荐:css视频教程)

repeating-linear-gradient

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

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

.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将其移动到四边。这种方式比较好的地方在于可以分别设置四条边的样式以及动画的方向,细心的同学应该会发现上一种方式的动画并不是顺时针或者逆时针方向的。

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

.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元素的内容会被遮盖住。

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

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

  }

}

推荐教程:css快速入门

以上就是css如何实现虚线边框滚动效果的详细内容,更多文章请关注木庄网络博客

相关阅读 >>

css怎么给按钮加上超链接

css中的content属性该如何使用

css如何改变图片的颜色

你可能不了解的css网格函数!

css如何设置div大小

浅谈使用css实现半透明边框和多重边框效果的方法

css如何设置边框透明

css怎么设置超链接颜色

css有哪些选择器

最全的css样式整理总结

更多相关阅读请进入《css》频道 >>




打赏

取消

感谢您的支持,我会继续努力的!

扫码支持
扫码打赏,您说多少就多少

打开支付宝扫一扫,即可进行扫码打赏哦

分享从这里开始,精彩与您同在

评论

管理员已关闭评论功能...