效果预览在当前页面点击右侧的“点击预览”按钮进行预览，点击链接进行预览全屏。https://codepen.io/comehop??e/pen/oPWJNj/Interactivevideo这个视频是交互式的，你可以随时暂停视频，编辑视频中的代码。请使用chrome、safari、edge打开观看。https://scrimba.com/p/pEgDAM/cbvPWHM源码下载日常前端实战系列完整源码请到github下载：https://github.com/comehop??e/front-end-daily-挑战代码解释定义dom，容器包含10个
子元素，每个
子元素还有一个子元素：
span>
定义容器大小：.container{width:17em;高度：17em；font-size:16px;}定义子元素的大小，和容器一样：.container{position:relative;}.containerdiv{position:absolute;宽度：继承；高度:inherit;}在子元素中间画一个黄色的小方块：.containerdiv{display:flex;对齐项目：居中；证明内容：中心；}.containerspan{位置：绝对；宽度：1em；高度：1em；background-color:yellow;}增加小方块左右移动的动画效果。后面会用到动画时长，所以定义为变量：.containerspan{--duration:2s;动画：移动var(--duration)infinite;}@keyframesmove{0%,100%{left:calc(10%-0.5em);}50%{左：计算（90%-0.5em）；}}用贝塞尔曲线调整动画的时间函数，让小盒子看起来像在左右两边跳来跳去：.containerspan{animation:movevar(--duration)cubic-bezier(0.6,-0.3,0.7,0)infinite;}增加小方块变形的动画，使其看起来像蹲跳拟人效果：.containerspan{animation:movevar(--duration)cubic-bezier(0.6,-0.3,0.7,0)infinite,morphvar(--duration)ease-in-outinfinite;}@keyframesmorph{0%,50%,100%{变换：scale(0.75,1);}25%,75%{变换:比例(1.5,0.5);}}至此，一个block的动画就完成了，接下来就是设置多个block的动画效果了。为子元素定义CSS下标变量：.containerdiv:nth-child(1){--n:1;}.containerdiv:nth-child(2){--n:2;}.containerdiv:nth-child(3){--n:3;}.containerdiv:nth-child(4){--n:4;}.containerdiv:nth-child(5){--n:5;}.容器div:nth-child(6){--n:6;}.containerdiv:nth-child(7){--n:7;}.containerdiv:nth-child(8){--n:8;}.containerdiv:nth-child(9){--n:9;}旋转子元素，使小方块均匀分布在容器周围，形成一个圆：.containerdiv{transform:rotate(calc(var(--n)*40deg));}设置动画延迟，现在看起来像一群小方块在靠着一个圆的内缘旋转（但实际上并没有元素在旋转，大脑感觉到的旋转是一种错觉）：.containerspan{animation-delay:calc(var(--duration)/9*var(--n)*-1);}最后，给小方块上色：.containerspan{background-color:hsl(calc(var(--n)*80deg),100%,70%);}大功告成！