只需一个DOM,纯CSS实现跑马灯线性特效
引言
之前看到一个效果,一条小细线,围绕着边框一直绕圈,不过它的实现方式使用了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很强大,嘿嘿
以上代码如有疑问,欢迎下方评论,谢谢。