让云漂浮在屏幕上，并将div分组为一个对象

我正在尝试通过天空中漂浮的云的css创建场景。。。这是当前的代码：

@font-face {
font-family: 'Super-Legend-Boy';
src: url('./Documents/assets/fonts/Super-Legend-Boy.eot');
src: url('./Documents/assets/fonts/Super-Legend-Boy.eot?#iefix') format('embedded-opentype'),
url('./Documents/assets/fonts/Super-Legend-Boy.woff2') format('woff2'),
url('./Documents/assets/fonts/Super-Legend-Boy.woff') format('woff'),
url('./Documents/assets/fonts/Super-Legend-Boy.ttf') format('truetype'),
url('./Documents/assets/fonts/Super-Legend-Boy.svg#Super-Legend-Boy') format('svg');
font-weight: normal;
font-style: normal;
font-display: swap;
}
html,body {

font-family: 'Super-Legend-Boy';
background: #95e9d0
}

.cloud {
position: relative;
box-shadow: thistle;
filter: drop-shadow(0px 5px 7px rgb(65, 63, 63));
animation: move 50s linear 0s infinite;
}
.cloud-one{
top: 200px;
left: 10%px;
animation: move 50s linear 0s infinite;
}
.cloud-two{
left: 50%;
animation: move 50s linear 0s infinite;
}
.cloud-three{
top: 210px;
left: 75%;
animation: move 50s linear 0s infinite;
}
.cloud-four{
left: 80%;
animation: move 50s linear 0s infinite;

}
.cloud-five{
left: 10%;
animation: move 50s linear 0s infinite;

}
.cloud-six{
top:210px;
left: 25%;
animation: move 50s linear 0s infinite;
}
@-webkit-keyframes move {
from {-webkit-transform: translateX(-400px);}
to {-webkit-transform: translateX(2000px);}
}

p {
text-align: center;

}
.circle {
background: white;
border-radius: 50%;
position: absolute;
}
.circle-one {
height: 100px;
width: 100px;
left: 40px;
}
.circle-two {
height: 60px;
width: 100px;
top: 40px;
}
.circle-three{
height: 80px;
width: 100px;
top: 20px;
left: 100px;
}
.circle-four {
height: 50px;
width: 100px;
top: 50px;
left: 150px;
}
div.container3 p {
margin: 0;
position: absolute;
top: 50%;
left: 50%;
margin-right: -50%;
transform: translate(-50%, -50%) }
.line {
position: absolute;
bottom: 150px;
height: 20px;
width: 60%;
left: 20%;
background-color: grey;

}

<body font-family:'Super-Legend-Boy'>

<div class="cloud cloud-one"><div class="circle circle-one"></div>
<div class="circle circle-two"></div>
<div class="circle circle-three"></div>
<div class="circle circle-four"></div> </div>
<div class="cloud cloud-two"><div class="circle circle-one"></div>
<div class="circle circle-two"></div>
<div class="circle circle-three"></div>
<div class="circle circle-four"></div> </div>
<div class="cloud cloud-three"><div class="circle circle-one"></div>
<div class="circle circle-two"></div>
<div class="circle circle-three"></div>
<div class="circle circle-four"></div> </div>
<div class="cloud cloud-four"><div class="circle circle-one"></div>
<div class="circle circle-two"></div>
<div class="circle circle-three"></div>
<div class="circle circle-four"></div> </div>
<div class="cloud cloud-five"><div class="circle circle-one"></div>
<div class="circle circle-two"></div>
<div class="circle circle-three"></div>
<div class="circle circle-four"></div> </div>
<div class="cloud cloud-six"><div class="circle circle-one"></div>
<div class="circle circle-two"></div>
<div class="circle circle-three"></div>
<div class="circle circle-four"></div> </div>
<div class="container3"> <p> The Choice is Yours </p></div>
<div class="line" background-color=grey></div>

</body>
</html>

我正在努力实现两件事。

让云在页面上移动，然后从另一边返回(如果有意义的话)不确定从哪里开始动画
我想将每个云分组为一个对象，这样当我添加阴影时，它会围绕整个云，而不是每个云中的每个圆形。还认为云需要分组，以便它们作为一个整体移动

如有任何帮助，我们将不胜感激！

提前感谢！

如下所示，您可以使用简单的css动画在周围移动云

html,
body {
background: #d6deff;
}
.cloud {
position: relative;
box-shadow: thistle;
}
.cloud-one {
top: 200px;
left: 10%px;
animation-name: move;
animation-iteration-count: infinite;
animation-duration: 4s;
animation-timing-function: linear;
}
.cloud-two {
left: 50%;
}
.cloud-three {
top: 210px;
left: 75%;
}
.circle {
background: white;
border-radius: 50%;
position: absolute;
}
.circle-one {
height: 100px;
width: 100px;
left: 40px;
}
.circle-two {
height: 60px;
width: 100px;
top: 40px;
}
.circle-three {
height: 80px;
width: 100px;
top: 20px;
left: 100px;
}
.circle-four {
height: 50px;
width: 100px;
top: 50px;
left: 150px;
}
@keyframes move {
from {0: -50%;}
to {left: 100%;}
}

<div class="cloud cloud-one">
<div class="circle circle-one"></div>
<div class="circle circle-two"></div>
<div class="circle circle-three"></div>
<div class="circle circle-four"></div>
</div>
<!-- <div class="cloud cloud-two">
<div class="circle circle-one"></div>
<div class="circle circle-two"></div>
<div class="circle circle-three"></div>
<div class="circle circle-four"></div>
</div>
<div class="cloud cloud-three">
<div class="circle circle-one"></div>
<div class="circle circle-two"></div>
<div class="circle circle-three"></div>
<div class="circle circle-four"></div>
</div> -->

如果需要，每个云都可以单独设置动画，也可以让它们一起移动。

这个片段会延迟第二张和第三张幻灯片的动画，使它们看起来像是独立移动的。取下这些以便均匀移动。

每个云上都会放置一个阴影，而不是每个圆上。显然，这需要根据需要的效果进行更改。

每个动画都从左侧的云开始，然后移动到右侧的右侧。

html,
body {
background: #d6deff
}
.cloud {
position: relative;
box-shadow: thistle;
filter: drop-shadow(0px 0 20px gray);
animation: move infinite 10s linear;
}
@keyframes move {
0% {
transform: translateX(-100%);
}
100% {
transform: translateX(calc(100vw + 200%));
}
}
.cloud-one {
top: 200px;
}
.cloud-two {
top: 100px;
animation-delay: 4s;
}
.cloud-three {
top: 250px;
animation-delay: 7s;
}
.circle {
background: white;
border-radius: 50%;
position: absolute;
}
.circle-one {
height: 100px;
width: 100px;
left: 40px;
}
.circle-two {
height: 60px;
width: 100px;
top: 40px;
}
.circle-three {
height: 80px;
width: 100px;
top: 20px;
left: 100px;
}
.circle-four {
height: 50px;
width: 100px;
top: 50px;
left: 150px;
}
.line {
position: absolute;
bottom: 150px;
height: 20px;
width: 60%;
left: 20%;
background-color: grey;
}

<div class="cloud cloud-one">
<div class="circle circle-one"></div>
<div class="circle circle-two"></div>
<div class="circle circle-three"></div>
<div class="circle circle-four"></div>
</div>
<div class="cloud cloud-two">
<div class="circle circle-one"></div>
<div class="circle circle-two"></div>
<div class="circle circle-three"></div>
<div class="circle circle-four"></div>
</div>
<div class="cloud cloud-three">
<div class="circle circle-one"></div>
<div class="circle circle-two"></div>
<div class="circle circle-three"></div>
<div class="circle circle-four"></div>
</div>
<div class="line" background-color=grey></div>
</html>

当然，根据你想要的初始条件和时间，还有一些整理工作要做

(为了将来参考，这个答案解决了原来的问题。)

关于根据注释的字体查询，您不需要HTML中的<body font-family:'Super-Legend-Boy'>，CSS中的内容就足够了。

看起来它写得很正确，但字体文件的url链接可能是错误的。检查您的url链接是否正确，如果正确，请尝试删除`/documents../之前的初始.等

谢谢。

相关内容

最新更新

热门标签：