怎么使用CSS实现眼冒金星的动画效果

　　介绍

这篇文章将为大家详细讲解有关怎么使用CSS实现眼冒金星的动画效果,小编觉得挺实用的,因此分享给大家做个参考,希望大家阅读完这篇文章后可以有所收获。

效果预览

怎么使用CSS实现眼冒金星的动画效果

源代码下载https://github.com/comehope/front-end-daily-challenges

代码解读

定义dom,容器中包含9个子元素:

& lt; div类=& # 39;容器# 39;比; 　　& lt; span> & lt;/span> 　　& lt; span> & lt;/span> 　　& lt; span> & lt;/span> 　　& lt; span> & lt;/span> 　　& lt; span> & lt;/span> 　　& lt; span> & lt;/span> 　　& lt; span> & lt;/span> 　　& lt; span> & lt;/span> 　　& lt; span> & lt;/span> 　　& lt;/div>

居中显示:

身体{ 　　保证金:0; 　　身高:100 vh; 　　显示:flex; 　　对齐项目:中心; 　　justify-content:中心; 　　背景颜色:黑色; 　　}

设置容器中子元素的布局方式,形成一个3 * 3的网格,其中<代码> ——列是网格每一边上的子元素数量:

。容器{ 　　显示:网格; 　　——列:3; 　　grid-template-columns:重复(var(列),1 fr); 　　}

定义子元素样式:

。集装箱跨越{ 　　宽度:25 px; 　　高度:25 px; 　　颜色:石灰; 　　background - color: currentColor; 　　}

增加子元素的动画效果,总动画时长是5秒,其中第1秒(0% ~ 20%)有动画,其余4秒(20% ~ 100%)静止:

。集装箱跨越{ 　　变换:规模(0); 　　动画:旋转5 s线性无限; 　　} 　　 　　@keyframes旋转{ 　　0% { 　　变换:旋转(0度)规模(1); 　　} 　　 　　5%、15% { 　　变换:旋转(90度)规模(0); 　　背景:白色; 　　} 　　 　　17.5% { 　　变换:旋转(180度)规模(1); 　　background - color: currentColor; 　　} 　　 　　20%、100% { 　　变换:旋转(90度)规模(0); 　　} 　　}

设置动画延时,使各子元素的动画随机延时4秒之内的任意时间:

。集装箱跨越{ 　　animation-delay:钙(var(延迟)* 1); 　　} 　　 　　.container跨度:nth-child(1){——延迟:0.8} 　　.container跨度:nth-child(2){——延迟:0.2} 　　.container跨度:nth-child(3){——延迟:1.9} 　　.container跨度:nth-child(4){——延迟:3.9} 　　.container跨度:nth-child(5){——延迟:2.8} 　　.container跨度:nth-child(6){——延迟:3.5} 　　.container跨度:nth-child(7){——延迟:1.5} 　　.container跨度:nth-child(8){——延迟:2.3} 　　.container跨度:nth-child(9){——延迟:1.7}

至此,静态效果完成,接下来批量处理dom元素。
引入d3库:

& lt;脚本https://www.yisu.com/zixun/src=" https://d3js.org/d3.v5.min.js ">

删除掉css文件中的<代码> ——列变量声明,用d3为变量赋值:

const列=3; 　　 　　d3.select (& # 39; .container& # 39;) 　　.style(& # 39;——列# 39;,列),

删除掉html文件中的<代码> & lt; span> 子元素,用d3动态生成:

d3.select (& # 39; .container& # 39;) 　　.style(& # 39;——列# 39;,列) 　　.selectAll(& # 39;跨度# 39;) 　　. data (d3。范围(列*列)) 　　.enter () 　　.append(& # 39;跨度# 39;);

删除掉css文件中的<代码>,变延迟量声明,用d3为变量生成随机数:

d3.select (& # 39; .container& # 39;) 　　.style(& # 39;——列# 39;,列) 　　.selectAll(& # 39;跨度# 39;) 　　. data (d3。范围(列*列)) 　　.enter () 　　.append(& # 39;跨度# 39;) 　　.style(& # 39;——延迟# 39;()=比;math . random () * 4);

最后,把边长改为15日生成更多的子元素,加强视觉效果:

const列=15;

关于怎么使用CSS实现眼冒金星的动画效果就分享到这里了,希望以上内容可以对大家有一定的帮助,可以学到更多知识。如果觉得文章不错,可以把它分享出去让更多的人看的到。

怎么使用CSS实现眼冒金星的动画效果