css如何实现虚线边框滚动效果
前端  /  管理员 发布于 6年前   162
我们先来看一下效果:
实现代码如下:
HTML
<div class="box"> <p>测试测试</p></div>
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快速入门
以上就是css如何实现虚线边框滚动效果的详细内容,更多请关注其它相关文章!
123 在
Clash for Windows作者删库跑路了,github已404中评论 按理说只要你在国内,所有的流量进出都在监控范围内,不管你怎么隐藏也没用,想搞你分..原梓番博客 在
在Laravel框架中使用模型Model分表最简单的方法中评论 好久好久都没看友情链接申请了,今天刚看,已经添加。..博主 在
佛跳墙vpn软件不会用?上不了网?佛跳墙vpn常见问题以及解决办法中评论 @1111老铁这个不行了,可以看看近期评论的其他文章..1111 在
佛跳墙vpn软件不会用?上不了网?佛跳墙vpn常见问题以及解决办法中评论 网站不能打开,博主百忙中能否发个APP下载链接,佛跳墙或极光..路人 在
php中使用hyperf框架调用讯飞星火大模型实现国内版chatgpt功能示例中评论 教程很详细,如果加个前端chatgpt对话页面就完美了..Copyright·© 2019 侯体宗版权所有· 粤ICP备20027696号