前端每日实战：128# 视频演示如何用纯 CSS 创作一个“女神来了，快让路”的动画

中心显示：正文{边距：0；高度：100vh；显示：弹性；对齐项目：居中；justify-content:center;}定义容器大小及其子元素布局：.container{width:8em;高度：1em；字体大小：35px；显示：弹性；justify-content:space-between;}绘制5个正方形，以边框为导向帮助定位：.containerspan{width:1em;高度：1em；边框：1px黑色虚线；/*辅助线*/}.boys{width:6em;显示：弹性；justify-content:space-between;}使用伪元素给元素添加样式，让元素更柔和，针对boys和boyscolor分别填充不同的颜色，删除上一步的辅助线：.containerspan::before{内容：'';位置：绝对；宽度：继承；身高：继承；边界半径：15%；box-shadow:000.2emrgba(0,0,0,0.3);}.girl::before{background-color:hotpink;}.boysspan::before{background-color:dodgerblue;}制作颜色4个男孩色块中的一个逐渐淡化，添加一点分层：.boysspan:nth-child(1)::before{filter:brightness(1);}.boysspan:nth-child(2)::before{过滤器：亮度（1.15）；}.boys跨度：nth-??child（3）::before{过滤器：亮度（1.3）；}.boysspan：nth-??child（4）::before{过滤器：亮度（1.45）;}接下来制作动画效果先增加少女动人的效果，同时颜色也淡化。其他动画的时间必须一致，所以设置动画时长为变量：.containerspan{width:1em;高度：1em；--时长：3s；}.girl{animation:slidevar(--duration)ease-in-outinfinite;}@keyframesslide{from{transform:translateX(0);过滤器：亮度（1）；}到{转换：translatex(calc(8em-(1em*1.25)));过滤器：亮度（1.45）；}}然后添加第一个男孩跳开的动画效果，注意15%到35%的旋转原点在元素正上方：.boysspan{animation:var(--duration)ease-in-outinfinite;}.boysspan:nth-child(1){animation-name:jump-off-1;}@keyframesjump-off-1{0%,15%{transform:rotate(0deg);}35%,100%{变换原点：-50%中心；变换：旋转（-180度）；}}参考第一个男孩的动画效果，再添加3个男孩跳远的动画效果，不同的是调整了关键帧的时间，时间依次延迟15%：。boysspan:nth-child(2){animation-name:jump-off-2;}.boysspan:nth-child(3){animation-name:jump-off-3;}.boysspan:nth-child(4){动画名称：jump-off-4;}@keyframesjump-off-2{0%,30%{transform:rotate(0deg);}50%,100%{transform-origin:-50%center;变换：旋转（-180度）；}}@keyframesjump-off-3{0%,45%{transform:rotate(0deg);}65%,100%{transform-origin:-50%center;变换：旋转（-180度）；}}@keyframesjump-off-4{0%,60%{transform:rotate(0deg);}80%,100%{变换原点：-50%中心；变换：旋转（-180度）；}}为第一个男孩添加一个拟人动画效果，这个效果写在::before伪元素中，动画过程是从正常到压扁，然后拉伸，再压扁，最后恢复正常，注意squasheddeformationfrom25%to40%,因为此时main元素发生了翻转，所以transform-origin的原点和squishdeformationfrom5%to15%的原点不一样：.boysspan::before{animation:var(--duration)ease-in-outinfinite;}.boysspan:nth-child(1)::before{filter:brightness(1);动画名称：jump-down-1;}@keyframesjump-down-1{5%{transform:scale(1,1);}15%{transform-origin:centerbottom;变换：比例（1.3，0.7）；}20%,25%{transform-origin:centerbottom;变换：比例（0.8，1.4）；}40%{transform-origin:centertop;变换：比例（1.3，0.7）；}55%,100%{变换:比例(1,1);}}参考第一个boy::before伪元素的动画效果，将另外三个boy的动画效果拟人化。当：.boysspan:nth-child(2)::before{animation-name:jump-down-2;}.boysspan:nth-child(3)::before{animation-name:jump-down-3;}.boysspan:nth-child(4)::before{animation-name:jump-down-4;}@keyframesjump-down-2{20%{transform:scale(1,1);}30%{transform-origin:centerbottom;变换：比例（1.3，0.7）；}35%,40%{transform-origin:centerbottom;变换：比例（0.8，1.4）；}55%{transform-origin:centertop;变换：比例（1.3，0.7）；}70%,100%{变换:scale(1,1);}}@keyframesjump-down-3{35%{transform:scale(1,1);}45%{transform-origin:centerbottom;变换：比例（1.3，0.7）；}50%,55%{transform-origin:centerbottom;变换：比例（0.8，1.4）；}70%{transform-origin:centertop;变换：比例（1.3，0.7）；}85%,100%{变换:比例(1,1);}}@keyframesjump-down-4{50%{transform:scale(1,1);}60%{transform-origin:centerbottom;变换：比例（1.3，0.7）；}65%,70%{transform-origin:centerbottom;变换：比例（0.8，1.4）；}85%{transform-origin:centertop;变换：比例（1.3，0.7）；}100%,100%{变换:比例(1,1);}}至此，女孩从左向右移动的动画效果就完成了在所有动画属性中添加alternate参数，使所有动画往复执行，实现从右侧返回左侧的效果：.girl{animation:slidevar(--duration)ease-in-out无限交替;}.boysspan{animation:var(--duration)ease-in-out无限交替;}.boysspan::before{animation:var(--duration)ease-in-out无限交替;}你'重做！