在 HTML 中使多个对象在同一 ID 下作为一个对象移动答案

【问题标题】：Making multiple objects move as one object under the same ID in HTML在 HTML 中使多个对象在同一 ID 下作为一个对象移动
【发布时间】：2020-10-17 03:07:41
【问题描述】：

我是一个初学者，在学习了动画之后只是在玩 HTML。我正在尝试建造一艘“发射”的火箭飞船。问题是，当我指定 id:"fly" 时，只有 class:"rockethead" 移动。我做错了什么，如何使“火箭”及其相关类也移动？

此外，我需要所有这些对象一起移动，并以它们开始时的相同形状结束。在我当前的动画中，当这些对象“发射”时，它们将不再是顶部的火箭形状（本质上，我只想让“火箭头”的顶部接触 500 像素，将火箭的其余部分放在它下面但不会分崩离析。我能做些什么来实现这一点？有没有更好的方法可以链接所有这些部分一起成为一个对象，这样我可以更有效地移动它吗？

.rocket {
  content: "";
  width: 50px;
  height: 120px;
  margin: 100px;
  background-color: blue;
  position: absolute;
  top: 30em;
}

.rocket::before {
  content: "";
  background-color: red;
  position: absolute;
  width: 25px;
  height: 50px;
  bottom: -11px;
  right: 50px;
  transform: skewY(-40deg);
}

.rocket::after {
  content: "";
  background-color: red;
  position: absolute;
  width: 25px;
  height: 50px;
  bottom: -11px;
  left: 50px;
  transform: skewY(40deg);
}

.rockethead {
  width: 0px;
  height: 0px;
  border-left: 25px solid transparent;
  border-right: 25px solid transparent;
  border-bottom: 50px solid red;
  position: absolute;
  margin: 100px;
  bottom: 47;
}

#fly {
  animation-name: blastoff;
  animation-duration: 4s;
}

@keyframes blastoff {
  0% {
    bottom: relative;
  }
  100% {
    bottom: 500px;
  }
}

<div id="fly" class="rockethead"></div>
<div id="fly" class="rocket"></div>

【问题讨论】：

标签： html css object animation keyframe

【解决方案1】：

Id 应该是唯一的，你应该给他们相同的类。

<div class="rockethead fly"></div>
<div class="rocket fly"></div>

【讨论】：

谢谢。我让他们所有的类和一切应该工作 - 但是当我也有 class="rocket fly" 时，“火箭头”仍然是唯一移动的东西
那是因为您将 .rocket 定位为 top: 30em 并为 bottom 属性设置动画。尝试使用底部属性而不是顶部属性来定位 .rocket。

【解决方案2】：

任何元素的 id 都必须是唯一的。没有两个元素可以具有相同的名称 ID。使用类来实现您要查找的内容。

【讨论】：

【解决方案3】：

除此之外，id 应该是唯一的，为了实现您想要的，您必须使用包装 div 包装您的 div，我们将其称为如下：

HTML

   <div class="wrapper">
      <div class="rockethead"></div>
      <div class="rocket"></div>
    </div>

CSS

.rocket {
  width: 50px;
  height: 120px;
  background-color: blue;
  position: relative;
}

.rocket::before {
  content: "";
  background-color: red;
  position: absolute;
  width: 25px;
  height: 50px;
  bottom: -11px;
  right: 50px;
  transform: skewY(-40deg);
}

.rocket::after {
  content: "";
  background-color: red;
  position: absolute;
  width: 25px;
  height: 50px;
  bottom: -11px;
  left: 50px;
  transform: skewY(40deg);
}

.rockethead {
  height:0;
  width:0;
  border-left: 25px solid transparent;
  border-right: 25px solid transparent;
  border-bottom: 50px solid red;
  position:relative;
}

@keyframes blastoff {
  0% {
    bottom:0;
  }
  100% {
    bottom: 75%;
  }
}

.wrapper {
  position:absolute;
  bottom:0%;
  left:50%;
  animation: blastoff 2s infinite;
  }

上述https://codepen.io/ahamdan/pen/jOrqaOy的Codepen

【讨论】：

哇，非常感谢！我是新手，但可以说我将来会经常包装对象。