我正在尝试使用云在移动的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>
答案 0 :(得分:2)
您可以使用scss
语法在元素之间循环并为位置和动画持续时间创建动态值。
$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%;
}
}