html中怎么让边框滚动,css如何实现虚线边框滚动效果

5268f80b9b1e01f982625ef6fac83ca1.png

b3b9f9883860b3ce714bddbde6555f81.png

我们先来看一下效果:

289be1417bbe54287ea87a924ab2eb6f.png

实现代码如下:

HTML

测试测试

Easy-way

通过背景图片实现。.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渐变。.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;

}

}

推荐教程:css快速入门

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值