前端日常实战：154#视频演示如何制作动画效果
时间：2023-03-30 22:27:56
CSS
效果预览点击右侧“点击预览”按钮可在当前页面预览，点击链接可全屏预览。https://codepen.io/comehop??e/pen/OBgBJJ互动视频本视频为互动视频，您可以随时暂停视频，编辑视频中的代码。请使用chrome、safari、edge打开观看。https://scrimba.com/p/pEgDAM/c83BKt3源码下载日常前端实战系列完整源码请到github下载：https://github.com/comehop??e/front-end-daily-挑战代码解释定义dom，容器包含9个子元素：
居中显示：body{margin:0;高度：100vh；显示：弹性；对齐项目：居中；证明内容：居中；background-color:black;}设置子元素在容器中的布局，形成一个3*3的网格，其中--columns为网格每一边的子元素数量：.container{display:grid;--列：3；grid-template-columns:repeat(var(--columns),1fr);}定义子元素样式：.containerspan{width:25px;高度：25px；颜色：石灰；background-color:currentColor;}增加子元素的动画效果，总动画时间为5秒，其中第一秒（0%~20%）有动画，其余4秒（20%~100%)仍然：.containerspan{变换：缩放(0);动画：旋转5s线性无限；}@keyframes旋转{0%{变换：旋转（0度）比例（1）；}5%,15%{变换：旋转（90度）缩放（0）；背景：白色；}17.5%{变换：旋转（180度）比例（1）；背景颜色：currentColor；}20%,100%{变换:旋转(90deg)比例(0);子元素的动画随机延迟4秒内任意时间：.containerspan{animation-delay:calc(var(--delay)*1s);}.containerspan:nth-child(1){--延迟：0.8}.containerspan:nth-child(2){--delay:0.2}.containerspan:nth-child(3){--delay:1.9}.containerspan:nth-child(4){--延迟：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文件延迟变量声明中的--，使用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;你完成了！
