怎么用CSS实现眼冒金星的动画效果
这篇文章将为大家详细讲解有关怎么用CSS实现眼冒金星的动画效果，小编觉得挺实用的，因此分享给大家做个参考，希望大家阅读完这篇文章后可以有所收获。
创新互联长期为上千家客户提供的网站建设服务，团队从业经验10年，关注不同地域、不同群体，并针对不同对象提供差异化的产品和服务；打造开放共赢平台，与合作伙伴共同营造健康的互联网生态环境。为长垣企业提供专业的网站设计、做网站，长垣网站改版等技术服务。拥有十年丰富建站经验和众多成功案例,为您定制开发。
代码解读
定义dom，容器中包含9个子元素：
居中显示：
body{
margin:0;
height:100vh;
display:flex;
align-items:center;
justify-content:center;
background-color:black;
}
设置容器中子元素的布局方式，形成一个3*3的网格，其中--columns是网格每一边上的子元素数量：
.container{
display:grid;
--columns:3;
grid-template-columns:repeat(var(--columns),1fr);
}
定义子元素样式：
.containerspan{
width:25px;
height:25px;
color:lime;
background-color:currentColor;
}
增加子元素的动画效果，总动画时长是5秒，其中第1秒（0%~20%）有动画，其余4秒（20%~100%）静止：
.containerspan{
transform:scale(0);
animation:spin5slinearinfinite;
}
@keyframesspin{
0%{
transform:rotate(0deg)scale(1);
}
5%,15%{
transform:rotate(90deg)scale(0);
background:white;
}
17.5%{
transform:rotate(180deg)scale(1);
background-color:currentColor;
}
20%,100%{
transform:rotate(90deg)scale(0);
}
}
设置动画延时，使各子元素的动画随机延时4秒之内的任意时间：
.containerspan{
animation-delay:calc(var(--delay)*1s);
}
.containerspan:nth-child(1){--delay:0.8}
.containerspan:nth-child(2){--delay:0.2}
.containerspan:nth-child(3){--delay:1.9}
.containerspan:nth-child(4){--delay:3.9}
.containerspan:nth-child(5){--delay:2.8}
.containerspan:nth-child(6){--delay:3.5}
.containerspan:nth-child(7){--delay:1.5}
.containerspan:nth-child(8){--delay:2.3}
.containerspan:nth-child(9){--delay:1.7}
至此，静态效果完成，接下来批量处理dom元素。
引入d3库：
删除掉css文件中的--columns变量声明，用d3为变量赋值：
constCOLUMNS=3;
d3.select('.container')
.style('--columns',COLUMNS);
删除掉html文件中的子元素，用d3动态生成：
d3.select('.container')
.style('--columns',COLUMNS)
.selectAll('span')
.data(d3.range(COLUMNS*COLUMNS))
.enter()
.append('span');
删除掉css文件中的--delay变量声明，用d3为变量生成随机数：
d3.select('.container')
.style('--columns',COLUMNS)
.selectAll('span')
.data(d3.range(COLUMNS*COLUMNS))
.enter()
.append('span')
.style('--delay',()=>Math.random()*4);
最后，把边长改为15，生成更多的子元素，加强视觉效果：
constCOLUMNS=15;
关于“怎么用CSS实现眼冒金星的动画效果”这篇文章就分享到这里了，希望以上内容可以对大家有一定的帮助，使各位可以学到更多知识，如果觉得文章不错，请把它分享出去让更多的人看到。
本文题目：怎么用CSS实现眼冒金星的动画效果
文章地址：http://scyanting.com/article/jeihch.html
