纯CSS实现跑马灯效果，CSS动画知识是该补一补了~
模拟面试、简历指导、入职指导、项目指导、答疑解惑可私信找我~已帮助100+名同学完成改造！
前言
大家好，我是林三心，用最通俗易懂的话讲最难的知识点是我的座右铭，基础是进阶的前提是我的初心~
最近看一个网站的时候，发现一个效果类似于广告灯的感觉，挺不错的，于是就想用纯CSS来实现这个效果，顺便提升一下自己的CSS动画技能
分析
我们先分析怎么做的，这个效果分成两个部分
- 上层：真正动画的层级
- 下层：充当一个底色
然后他们通过绝对定位叠在一起
可以看到，动画没开始前，页面是这样的，可以理解这是一个底色下层，铺在下面，让每一个圆都有一个轮廓
动画上层开始的时候，下层是不变的，一直保持底色
开始写页面
页面
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
body {
background-color: #232b36;
}
.container {
position: relative;
}
.grid {
display: flex;
flex-wrap: wrap;
width: 240px;
}
.high {
position: absolute;
z-index: -1;
top: 0;
left: 0;
}
.low {
opacity: .1;
position: absolute;
z-index: 0;
top: 0;
left: 0;
}
span {
width: 4px;
height: 4px;
margin: 10px;
border-radius: 50%;
background-color: #fff;
opacity: .6;
display: block;
}
</style>
</head>
<body>
<div class="container">
<div class="grid high">
30个span。。
</div>
<div class="grid low">
30个span。。
</div>
</div>
</body>
</html>
现在能看到已经把两层叠在了一起
动画
接下来让 high 这一层开始动画
.high span {
/* 动画名 */
animation-name: myAnimation;
/* 动画时长 */
animation-duration: 1s;
/* 无限循环 */
animation-iteration-count: infinite;
background-color: #AEF731;
}
@keyframes myAnimation {
0% {
transform: scale(0);
opacity: 0;
}
100% {
transform: scale(1);
opacity: 1;
}
}
现在就有动画效果了
但是我们可以看到刚刚我们想要的效果，他是中间先变，四周再变的
所以我们需要使用到动画延迟，也就是
animation-delay这个样式属性
.delay-1 {
animation-delay: 0.1s;
}
.delay-2 {
animation-delay: 0.2s;
}
.delay-3 {
animation-delay: 0.3s;
}
.delay-4 {
animation-delay: 0.4s;
}
<div class="grid high">
<span class="delay-4"></span>
<span class="delay-3"></span>
<span class="delay-2"></span>
<span class="delay-1"></span>
<span></span>
<span></span>
<span class="delay-1"></span>
<span class="delay-2"></span>
<span class="delay-3"></span>
<span class="delay-4"></span>
<span class="delay-4"></span>
<span class="delay-3"></span>
<span class="delay-2"></span>
<span class="delay-1"></span>
<span></span>
<span></span>
<span class="delay-1"></span>
<span class="delay-2"></span>
<span class="delay-3"></span>
<span class="delay-4"></span>
<span class="delay-4"></span>
<span class="delay-2"></span>
<span class="delay-2"></span>
<span class="delay-1"></span>
<span></span>
<span></span>
<span class="delay-1"></span>
<span class="delay-2"></span>
<span class="delay-3"></span>
<span class="delay-4"></span>
</div>
这就达到了我们想要的效果啦~~~
代码总览
结语
我是林三心
- 一个待过小型toG型外包公司、大型外包公司、小公司、潜力型创业公司、大公司的作死型前端选手；
- 一个偏前端的全干工程师；
- 一个不正经的掘金作者；
- 逗比的B站up主；
- 不帅的小红书博主；
- 喜欢打铁的篮球菜鸟；
- 喜欢历史的乏味少年；
- 喜欢rap的五音不全弱鸡如果你想一起学习前端，一起摸鱼，一起研究简历优化，一起研究面试进步，一起交流历史音乐篮球rap，可以来俺的摸鱼学习群哈哈，点这个，有7000多名前端小伙伴在等着一起学习哦 -->
广州的兄弟可以约饭哦，或者约球~我负责打铁，你负责进球，谢谢~