引言

之前看到一个效果，一条小细线，围绕着边框一直绕圈，不过它的实现方式使用了JavaScript。于是就尝试着写了一个只需要CSS就能围绕边框跑的效果，废话不多说，直接上效果图和代码。

跑马灯效果图&Demo

很简洁的一个效果

跑马灯代码

HTML

<div class="box marquee-line">我是跑马灯啊^_^，点击我也可以查看Demo哦</div>

CSS

@keyframes moveLine {0% {background-position: -100px 1px, calc(100% - 1px) -100px, calc(100% + 100px) calc(100% - 1px), 1px 0px;}5% {background-position: 0px 1px, calc(100% - 1px) -100px, calc(100% + 100px) calc(100% - 1px), 1px -100px;}30% {background-position: 100% 1px, calc(100% - 1px) -100px, calc(100% + 100px) calc(100% - 1px), 1px -100px;}35% {background-position: calc(100% + 100px) 1px, calc(100% - 1px) 0px, calc(100% + 100px) calc(100% - 1px), 1px -100px;}50% {background-position: calc(100% + 100px) 1px, calc(100% - 1px) 100%, calc(100% + 100px) calc(100% - 1px), -100px -100px;}55% {background-position: calc(100% + 100px) 1px, calc(100% - 1px) calc(100% + 100px), 100% calc(100% - 1px), -100px calc(100% + 100px);}80% {background-position: calc(100% + 100px) 1px, calc(100% - 1px) calc(100% + 100px), 0px calc(100% - 1px), 1px calc(100% + 100px);}85% {background-position: calc(100% + 100px) 1px, calc(100% - 1px) calc(100% + 100px), -100px calc(100% - 1px), 1px 100%;}100% {background-position: calc(100% + 100px) 1px, calc(100% - 1px) calc(100% + 100px), -100px calc(100% - 1px), 1px 0px;}
}.marquee-line {background-image: linear-gradient(90deg, rgba(0,0,0,0) 0%, #000 100%), linear-gradient(0deg, #000 0%, rgba(0,0,0,0) 100%), linear-gradient(-90deg, rgba(0,0,0,0) 0%, #000 100%), linear-gradient(0deg, rgba(0,0,0,0) 0%, #000 100%);background-repeat: no-repeat, no-repeat, no-repeat, no-repeat;background-size: 100px 4px, 4px 100px, 100px 4px, 4px 100px;background-position: -100px 1px, calc(100% - 1px) -100px, calc(100% + 100px) calc(100% - 1px), 1px 0px;animation: moveLine 8s infinite linear;height: calc(100% - 2px);padding: 1px;background-clip: content-box;
}.box {height: 300px;width: 400px;box-shadow: 0 0 3px orange;text-align: center;line-height: 280px;
}

你木有看错，只有一个DOM，外加一些CSS，就实现了上图的效果。

样式分析解释

从以上CSS代码可以看到，这里的效果利用了background可以设置多层背景的特性，设置四个渐变的背景，分别在四个角上，然后就是控制四条渐变线背景出现的时机。这里只需要写一次，在想要有这个效果的地方使用.marquee-line这个className就行了，不过一般也就用在网站的body标签上，因为是使用背景的方式，它不会遮挡任何经过的元素。唯一不足的地方是，因为是使用纯CSS，宽高的移动速率全靠在@keyframes moveLine内部通过百分比写。所以就会造成在不同的宽高情况下，速率是不一样的。整体速度是通过设置animation-duration，我这里写的 8s。

最后想说的是，CSS很强大，嘿嘿

以上代码如有疑问，欢迎下方评论，谢谢。

只需一个DOM，纯CSS实现线性跑马灯特效相关推荐

一个元素纯CSS实现开关按钮【介绍box-shadow、单边或多重阴影、appearance属性】
借助checkbox表单元素.:checked伪类.::before/::after伪元素,就可以只需一个input[type="checkbox"]元素,通过纯CSS实现Swit ...
“我只需一个周末就可以构建出这个应用！”
‍‍ 作者 | JOÃO ALVES 译者 | 弯月出品 | CSDN(ID:CSDNnews) 以下为译文: 每次人们购买新房.新车或新电视时,都会对新买的产品赞不绝口,这时他们与新买的产品还处于 ...
javaul材质包下载_只需一个水桶包你就能装满时髦
如果要列一份2015年春夏的it bag清单,水桶包必居其中.从一直断货的Mansur Gavriel到超智能的Ralph Lauren Ricky水桶包,无一不是明星潮人们的挚爱.麂皮.流苏70年代 ...
【百度地图API】发布静态图API啦！只需一个网址，即可展示定制百度地图！
[百度地图API]发布静态图API啦!只需一个网址,即可展示定制百度地图! 原文:[百度地图API]发布静态图API啦!只需一个网址,即可展示定制百度地图! 摘要: 百度地图静态图API!您无须执行任 ...
华为云计算机访问手机软件,华为云电脑来了，只需一个APP就能让手机秒变Windows电脑！...
华为云电脑来了,只需一个APP就能在手机上体验熟悉的Windows操作,实现在手机上制作PPT.表格.写文案以及处理图片等,就算没带电脑出门,也能随时处理紧急公务. 1.webp.jpg (168.0 ...
deepin efi 启动u盘_如何安装Deepin国产操作系统？只需一个U盘就够了，超简单
2019年快结束了,距离微软对Win7系统停止服务的日期也是越来越近了.与此同时,人们对国产操作系统的热度和期望值也是越来越高.在诸多国产操作系统中,Deepin系统是目前知名度最高的一个,而且无论在 ...
eps提取高程点在哪里_只需一个命令，就能提取CAD图纸所有高程点坐标，感觉学费白交了...
原标题:只需一个命令,就能提取CAD图纸所有高程点坐标,感觉学费白交了作为乙方设计师,经常会碰到一些甲方爸爸临时扔一个图纸过来,我们这个时候就要对图纸里提取有效数据信息才能进行下一步工作,拿到CAD ...
配音是怎么制作出来的，想做出让人惊艳的配音，只需一个小技巧
配音是怎么制作出来的,想做出让人惊艳的配音,只需一个小技巧配音,除了是一部分赖以为生的技能之外,也是很多小伙伴打发时间的娱乐方式.专业的配音演员可以让影视剧.动漫的内容拥有灵魂,也可以通过阅读有声书 ...
西门子PID调节仿真程序，1200plc和1500plc通用，只需一个PLC实物，就能轻松实现PID工艺对象的仿真
西门子PID调节仿真程序,1200plc和1500plc通用,只需一个PLC实物,就能轻松实现PID工艺对象的仿真,是学习PID的参数的好工具. 针对这套程序,录制了一段视频解说,手把手教你如何使用博 ...

只需一个DOM，纯CSS实现线性跑马灯特效

只需一个DOM，纯CSS实现跑马灯线性特效

引言

跑马灯效果图&Demo

跑马灯代码

样式分析解释

只需一个DOM，纯CSS实现线性跑马灯特效相关推荐

最新文章

热门文章