Анимация движущихся облаков с помощью чистого CSS - PullRequest
Новая
       10

Анимация движущихся облаков с помощью чистого CSS

4 голосов
/ 11 апреля 2019

Я пытаюсь создать что-то похожее на изображение ниже с помощью CSS-анимации, в которой движутся облака. image

Я сделал облака в виде 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>

1 Ответ

2 голосов
/ 11 апреля 2019

Вы можете использовать синтаксис 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%;
  }
}
...