Html 如何在不为每个元素使用第n个子元素的情况下创建雪花动画场景？

有没有一种方法可以不使用第n个子选择器来编写CSS代码？我希望使代码更具可伸缩性，以防将来添加更多雪花

身体{ 背景色：红色； } .雪花{ 颜色：fff； 字号：1em； 字体系列：Arial； 文本阴影：0 1px 000； } @-webkit关键帧雪花飘落{ 0% { 前-10%； } 100% { 最高：100%； } } @-webkit关键帧雪花抖动{ 0% { -webkit转换：translateX0px； 转换：translateX0px； } 50% { -webkit转换：translateX80px； 转换：translateX80px； } 100% { -webkit转换：translateX0px； 转换：translateX0px； } } @关键帧雪花飘落{ 0% { 前-10%； } 100% { 最高：100%； } } @关键帧雪花抖动{ 0% { 转换：translateX0px； } 50% { 转换：translateX80px； } 100% { 转换：translateX0px； } } .雪花{ 位置：固定； 前-10%； z指数：9999； -webkit用户选择：无； -moz用户选择：无； -ms用户选择：无； 用户选择：无； 游标：默认值； -webkit动画名称：雪花飘落，雪花摇曳； -webkit动画持续时间：10秒，3秒； -webkit动画计时功能：线性，易入易出； -webkit动画迭代计数：无限，无限； -webkit动画播放状态：正在运行，正在运行； 动画名称：雪花飘落，雪花摇曳； 动画持续时间：10秒，3秒； 动画计时功能：线性，易入易出； 动画迭代次数：无限，无限； 动画播放状态：正在运行，正在运行； } .雪花：第n种类型0{ 左：1%； -webkit动画延迟：0秒，0秒； 动画延迟：0s，0s； } .雪花：第n种类型1{ 左：10%； -webkit动画延迟：1s，1s； 动画延迟：1s，1s； } .雪花：第n种类型2{ 左：20%； -webkit动画延迟：6s，0.5s； 动画延迟：6s，0.5s； } .雪花：第n种类型3{ 左：30%； -webkit动画延迟：4s，2s； 动画延迟：4s，2s； } .雪花：第n种类型4{ 左：40%； -webkit动画延迟：2s，2s； 动画延迟：2s，2s； } .雪花：第n种类型5{ 左：50%； -webkit动画延迟：8s，3s； 动画延迟：8s，3s； } .雪花：第n种类型6{ 左：60%； -webkit动画延迟：6s，2s； 动画延迟：6s，2s； } .雪花：第n种类型7{ 左：70%； -webkit动画延迟：2.5s，1s； 动画延迟：2.5s，1s； } .雪花：第n种类型8{ 左：80%； -webkit动画延迟：1s，0s； 动画延迟：1s，0s； } .雪花：第n种类型9{ 左：90%； -webkit动画延迟：3s，1.5s； 动画延迟：3s，1.5s； } /*仅用于演示目的*/ .演示{ 字体系列：“Raleway”，无衬线； 颜色：fff； 显示：块； 保证金：0自动； 填充：15px0； 文本对齐：居中； } .演示a{ 字体系列：“Raleway”，无衬线； 颜色：000； } ❅ ❅ ❆ ❄ ❅ ❆ ❄ ❅ ❆ ❄

---

首先删除所有不需要的前缀和默认值。然后在这种情况下，您可以使用内联样式和CSS变量来添加特定的CSS。我还对代码进行了一些更新，以使用flexbox并去掉所有剩余值：

.雪花{ 显示器：flex； 位置：固定； 排名：0； 左：0； 右：0； 底部：0； 背景色：000； z指数：9999； 指针事件：无； } .雪花{ 颜色：fff； 字号：1em； 字体系列：Arial； 文本阴影：0 1px 000； 弹性：1； 位置：相对位置； 前-10%； 动画：雪花落下10秒直线，雪花摇动3秒缓进缓出； 动画延迟：var-d； 动画迭代次数：无限； } @关键帧雪花飘落{ 100% { 最高：100%； } } @关键帧雪花抖动{ 50% { 转换：translateX80px； } } ❅ ❅ ❆ ❄ ❅ ❆ ❄ ❅ ❆ ❄

---

首先删除所有不需要的前缀和默认值。然后在这种情况下，您可以使用内联样式和CSS变量来添加特定的CSS。我还对代码进行了一些更新，以使用flexbox并去掉所有剩余值：

.雪花{ 显示器：flex； 位置：固定； 排名：0； 左：0； 右：0； 底部：0； 背景色：000； z指数：9999； 指针事件：无； } .雪花{ 颜色：fff； 字号：1em； 字体系列：Arial； 文本阴影：0 1px 000； 弹性：1； 位置：相对位置； 前-10%； 动画：雪花落下10秒直线，雪花摇动3秒缓进缓出； 动画延迟：var-d； 动画迭代次数：无限； } @关键帧雪花飘落{ 100% { 最高：100%； } } @关键帧雪花抖动{ 50% { 转换：translateX80px； } } ❅ ❅ ❆ ❄ ❅ ❆ ❄ ❅ ❆ ❄

---

这就是LESS/SASS的全部要点：使用mixin来减少代码冗余。@Terry我知道，但我想在

---

CSS如果可能的话您有没有研究过CSS变量？预处理器在这里没有太多用处，因为代码仍然在那里，只是在编译后出现，而不是在编写时出现。这就是LESS/SASS的全部要点：使用mixin来减少代码冗余。@Terry我知道，但是如果可能的话，我想用CSS来做。你有没有研究过CSS变量？预处理器在这里没有多大用处，因为代码仍然在那里，只是在编译后出现，而不是在编写时出现。漂亮-希望你不介意我的编辑；美丽-希望你不介意我的编辑；