使用纯CSS设置移动云的动画

我正在尝试创建类似下图的东西，只是在云移动的地方使用CSS动画

我将云制作为SVG并创建了动画。然而，我很难确定云的位置。我制作了十个云彩，但只有几部很难适应不同屏幕大小的节目。我应该如何着手创建这10朵在屏幕上缓慢移动的云呢

另外，我应该如何在上图底部创建云分隔器？我应该将其创建为SVG背景，还是使用CSS可以实现这一点

*{margin:0；padding:0；}
身体{
宽度：100%；
身高：100%；
保证金：0；
溢出：隐藏；
}
#云彩{
背景色：#272b36！重要；
}
.云{
宽度：400px；高度：100px；
背景图片：url(https://www.turbotobias.dk/wp-content/uploads/2019/03/White-cloud-type3.svg);
位置：相对位置；
背景重复：无重复；
}
/*创建所有云*/
.sky1{
不透明度：0.4；
-webkit动画：moveclouds 45线性无限；
-moz动画：moveclouds 45 s线性无限；
-o-动画：移动云45 s线性无限；
}
.sky2{
左：200px；
-webkit变换：比例（0.6）；
-moz变换：比例（0.6）；
变换：比例（0.6）；
不透明度：0.4；
-webkit动画：moveclouds 50s线性无限；
-moz动画：moveclouds 50秒线性无限；
-o-动画：移动云50秒线性无限；
}
.sky3{
左侧：-250像素；顶部：-200像素；
-webkit变换：比例（0.8）；
-moz变换：比例（0.8）；
变换：比例（0.8）；
不透明度：0.4；
-webkit动画：移动云60秒线性无限；
-moz动画：移动云60秒线性无限；
-o动画：移动云60秒线性无限；
}
.sky4{
左：470像素；顶部：-250像素；
-webkit变换：比例（0.75）；
-moz变换：比例（0.75）；
变换：比例（0.75）；
不透明度：0.4；
-webkit动画：moveclouds线性无限；
-moz动画：moves线性无限；
-o动画：moves线性无限；
}
.sky5{
左侧：-150px；顶部：-150px；
-webkit变换：比例（0.8）；
-moz变换：比例（0.8）；
变换：比例（0.8）；
不透明度：0.4；
-webkit动画：moveclouds 55s线性无限；
-moz动画：moveclouds 55s线性无限；
-o动画：moves线性无限；
}
.sky6{
左：470像素；顶部：-270像素；
-webkit变换：比例（0.75）；
-moz变换：比例（0.75）；
变换：比例（0.75）；
不透明度：0.4；
-webkit动画：moveclouds线性无限；
-moz动画：moves线性无限；
-o动画：moves线性无限；
}
.sky7{
左：470px；顶部：-375px；
-webkit变换：比例（0.75）；
-moz变换：比例（0.75）；
变换：比例（0.75）；
不透明度：0.4；
-webkit动画：moveclouds线性无限；
-moz动画：moves线性无限；
-o动画：moves线性无限；
}
.sky8{
左：470像素；顶部：-350像素；
-webkit变换：比例（0.75）；
-moz变换：比例（0.75）；
变换：比例（0.75）；
不透明度：0.4；
-webkit动画：moveclouds线性无限；
-moz动画：moves线性无限；
-o动画：moves线性无限；
}
.sky9{
左：470像素；顶部：-150像素；
-webkit变换：比例（0.75）；
-moz变换：比例（0.75）；
变换：比例（0.75）；
不透明度：0.4；
-webkit动画：moveclouds线性无限；
-moz动画：moves线性无限；
-o动画：moves线性无限；
}
.sky10{
左：470像素；顶部：-450像素；
-webkit变换：比例（0.75）；
-moz变换：比例（0.75）；
变换：比例（0.75）；
不透明度：0.4；
-webkit动画：moveclouds线性无限；
-moz动画：moves线性无限；
-o动画：moves线性无限；
}
/*创建动画*/
@-webkit关键帧移动云{
0%{左边距：1000px；}
100%{左边距：-1000px；}
}
@-moz关键帧移动云{
0%{左边距：1000px；}
100%{左边距：-1000px；}
}
@-o关键帧移动云{
0%{左边距：1000px；}
100%{左边距：-1000px；}
}

---

您可以使用

scss

语法循环元素并为位置和动画持续时间创建动态值

---

这是什么awesome@Pete我认为这是可以调整的，像这样的

$clouds: 10;
@for $i from 0 through $clouds {
  div.cloud:nth-child(#{$i + 1}) {
    left: random(150) / 150 * 100% + 50%;
    top: random(100) / 100 * 90%;
    transform: scale(random(2) - 0.5);
    opacity: random(60) / 100;
    animation: moveclouds random(20) + 20 + s linear infinite;
  }
}

@keyframes moveclouds {
  100% {
    left: -50%;
  }
}