让云漂浮在屏幕上并将 div 组合成一个对象？答案

【问题标题】：Make clouds float across screen and group divs into one object?让云漂浮在屏幕上并将 div 组合成一个对象？
【发布时间】：2021-08-29 23:40:04
【问题描述】：

我正在尝试通过漂浮在天空中的云的 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>

我正在努力实现的两件事。

让云在页面上移动并从另一侧返回（如果有意义的话）不确定从哪里开始制作动画。
我想将每朵云组合成一个对象，这样当我添加阴影时，它会环绕整个云，而不是每朵云中的每个圆形。还认为需要对云进行分组才能使它们作为一个整体移动。

任何帮助将不胜感激！

提前致谢！

【问题讨论】：

This answer 应该可以解决您的问题。
您好，非常感谢！这有帮助，我刚刚遇到另一个问题，想知道您是否可以提供帮助！我觉得我在尝试添加的字体中遗漏了一些东西......（代码已更新）但字体没有显示......：/

标签： css animation css-animations

【解决方案1】：

如下所示，您可以使用简单的 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> -->

【讨论】：

【解决方案2】：

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

这个 sn-p 会延迟第二张和第三张幻灯片的动画，因此它们看起来好像是独立移动的。移除那些以便均匀移动。

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

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

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>

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

【讨论】：

非常感谢！这有帮助！看到你的代码真的很有用，不胜感激！我已经更新了上面的内容以反映更改，但是，我似乎看不到为什么我的字体没有出现在页面中心的文本中的原因......有什么想法吗？ ://

【解决方案3】：

（供将来参考this answer 解决了原来的问题。）

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

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

谢谢。

【讨论】：

尝试过使用路径，但似乎无法使其正常工作，有没有办法检索路径文件（右键单击>查看路径）或其他什么？谢谢您的帮助。你们都太棒了！
@Jonty 这个问题应该作为副本关闭，不回答。 How to Answer