前端日常实践：150#视频演示如何使用CSS和D3制作群舞动画
时间：2023-03-31 13:36:50
CSS
效果预览在当前页面点击右侧“点击预览”按钮预览，点击链接预览在全屏。https://codepen.io/comehop??e/pen/yRYOwq互动视频本视频为互动视频，您可以随时暂停视频，编辑视频中的代码。请使用chrome、safari、edge打开观看。https://scrimba.com/p/pEgDAM/cBZ3Nt6源码下载日常前端实战系列完整源码请到github下载：https://github.com/comehop??e/front-end-daily-挑战代码解释定义dom，容器包含一个.square子容器，子容器包含4个，每个代表一个对角扇区：
居中显示：body{margin:0;高度：100vh；显示：弹性；对齐项目：居中；证明内容：居中；background-color:#222;}设置容器的大小单位，1em等于8px:4
不设置宽高，只设置边框，第一个和第四个只取左右边框，第二个和第三个只取上下边框：.squarespan{display:block;border:2.5em实心透明;颜色：#ddd;}.squarespan:nth-child(1),.squarespan:nth-child(4){border-left-color:currentColor;右边框颜色：currentColor；}.square跨度：nth-??child(2),.squarespan:nth-child(3){border-top-color:currentColor;border-bottom-color:currentColor;}将边框改为弧形：.squarespan{border-radius:50%;}inchild使用容器中的网格布局将4设置为2*2的网格：.square{显示：网格；网格模板列：重复（2、1fr）；网格间隙：0.2em；padding:0.1em;}旋转4个使它们形成一个正方形，看起来像一朵花。计算结果为45度。这么写是为了和下一个动画的计算公式一致：.squarespan{transform:rotate(calc(45deg+90deg*0));}添加一个动画来旋转，整个动画过程旋转4次，每次旋转90度，旋转4次后回到原位：.squarespan{animation:rotation2sease-in-outinfinite;}@keyframesrotation{0%{transform:rotate(calc(45度+90度*0));}25%{变换：旋转（计算（45deg+90deg*1））;}50%{变换：旋转（计算（45deg+90deg*2））;}75%{变换：旋转（计算（45deg+90deg*3））;}100%{变换：旋转（计算（45deg+90deg*4））;}}使中的2个朝相反的方向移动：.squarespan:nth-child(2),.squarespan:nth-child(3){animation-direction:reverse;}至此一个.square子容器的动画就完成了，接下来制作4个.square的动画在dom中再添加3组.square子容器： 