css - 使用纯 CSS 动画移动的云

Question

我正在尝试使用云在移动的 CSS 动画创建类似下图的内容。

我将云彩制作成 SVG 并制作了动画。但是，我很难定位云。我创建了十朵云，但只有几个很难适应不同的屏幕尺寸。我应该如何创建这 10 朵在屏幕上缓慢移动的云？

此外，我应该如何在上图底部创建云分隔线？我应该将其创建为 SVG 背景还是如何使用 CSS 实现？

*{ margin: 0; padding: 0;}

body {
	  width: 100%;
    height: 100%;
    margin: 0;
    overflow: hidden;
}

#clouds{
	background-color: #272b36!important;
}

.cloud {
	width: 400px; height: 100px;
	background-image: url(https://www.turbotobias.dk/wp-content/uploads/2019/03/White-cloud-type3.svg);
	position: relative; 
  background-repeat: no-repeat;
}

/* create all of the clouds */
.sky1 {
  opacity: 0.4;
	-webkit-animation: moveclouds 45s linear infinite;
	-moz-animation: moveclouds 45s linear infinite;
	-o-animation: moveclouds 45s linear infinite;
}

.sky2 {
	left: 200px;
	
	-webkit-transform: scale(0.6);
	-moz-transform: scale(0.6);
	transform: scale(0.6);
	opacity: 0.4;
	
	-webkit-animation: moveclouds 50s linear infinite;
	-moz-animation: moveclouds 50s linear infinite;
	-o-animation: moveclouds 50s linear infinite;
}

.sky3 {
	left: -250px; top: -200px;
	
	-webkit-transform: scale(0.8);
	-moz-transform: scale(0.8);
	transform: scale(0.8);
	opacity: 0.4;
	
	-webkit-animation: moveclouds 60s linear infinite;
	-moz-animation: moveclouds 60s linear infinite;
	-o-animation: moveclouds 60s linear infinite;
}

.sky4 {
	left: 470px; top: -250px;
	
	-webkit-transform: scale(0.75);
	-moz-transform: scale(0.75);
	transform: scale(0.75);
	opacity: 0.4;
	
	-webkit-animation: moveclouds 65s linear infinite;
	-moz-animation: moveclouds 65s linear infinite;
	-o-animation: moveclouds 65s linear infinite;
}

.sky5 {
	left: -150px; top: -150px;
	
	-webkit-transform: scale(0.8);
	-moz-transform: scale(0.8);
	transform: scale(0.8);
	opacity: 0.4;
	
	-webkit-animation: moveclouds 55s linear infinite;
	-moz-animation: moveclouds 55s linear infinite;
	-o-animation: moveclouds 55s linear infinite;
}

.sky6 {
	left: 470px; top: -270px;
	
	-webkit-transform: scale(0.75);
	-moz-transform: scale(0.75);
	transform: scale(0.75);
	opacity: 0.4;
	
	-webkit-animation: moveclouds 65s linear infinite;
	-moz-animation: moveclouds 65s linear infinite;
	-o-animation: moveclouds 65s linear infinite;
}

.sky7 {
	left: 470px; top: -375px;
	
	-webkit-transform: scale(0.75);
	-moz-transform: scale(0.75);
	transform: scale(0.75);
	opacity: 0.4;
	
	-webkit-animation: moveclouds 65s linear infinite;
	-moz-animation: moveclouds 65s linear infinite;
	-o-animation: moveclouds 65s linear infinite;
}

.sky8 {
	left: 470px; top: -350px;
	
	-webkit-transform: scale(0.75);
	-moz-transform: scale(0.75);
	transform: scale(0.75);
	opacity: 0.4;
	
	-webkit-animation: moveclouds 65s linear infinite;
	-moz-animation: moveclouds 65s linear infinite;
	-o-animation: moveclouds 65s linear infinite;
}

.sky9 {
	left: 470px; top: -150px;
	
	-webkit-transform: scale(0.75);
	-moz-transform: scale(0.75);
	transform: scale(0.75);
	opacity: 0.4;
	
	-webkit-animation: moveclouds 65s linear infinite;
	-moz-animation: moveclouds 65s linear infinite;
	-o-animation: moveclouds 65s linear infinite;
}

.sky10 {
	left: 470px; top: -450px;
	
	-webkit-transform: scale(0.75);
	-moz-transform: scale(0.75);
	transform: scale(0.75);
	opacity: 0.4;
	
	-webkit-animation: moveclouds 65s linear infinite;
	-moz-animation: moveclouds 65s linear infinite;
	-o-animation: moveclouds 65s linear infinite;
}

/* create the animation */

@-webkit-keyframes moveclouds {
	0% {margin-left: 1000px;}
	100% {margin-left: -1000px;}
}
@-moz-keyframes moveclouds {
	0% {margin-left: 1000px;}
	100% {margin-left: -1000px;}
}
@-o-keyframes moveclouds {
	0% {margin-left: 1000px;}
	100% {margin-left: -1000px;}
}

<div id="clouds">
  <div class="cloud sky1"></div>
  <div class="cloud sky2"></div>
  <div class="cloud sky3"></div>
  <div class="cloud sky4"></div>
  <div class="cloud sky5"></div>
  <div class="cloud sky6"></div>
  <div class="cloud sky7"></div>
  <div class="cloud sky8"></div>
  <div class="cloud sky9"></div>
  <div class="cloud sky10"></div>
</div>

Answer 1

您可以使用 scss 语法循环遍历元素并为位置和动画持续时间创建动态值。

DEMO

$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%;
  }
}