Question

我想创建一个从左到右浮动的云的CSS动画。我有一个宽度为100％的div，云是＆＃34;位置：绝对＆＃34;的图像。我的解决方案非常简单：创建一个动画，它可以改变＆＃34; left＆＃34;随着时间的推移，图像的属性达到120％。但是，该解决方案的问题在于，云在跨越整个宽度后会扩展整个HTML文档的宽度。

我怎样才能防止这种情况，并且在穿过100％的宽度后让云简直消失？提前谢谢！

编辑：这是CSS的一部分：

.header{
  display:flex;
  flex-direction:row;
  height: 40em;
  justify-content:center;
  align-items:center;

  width:100%;
  overflow:hidden;
 }

.cloud{
  position:absolute;
  left:-10%;
  animation: cloud 10s linear infinite;
 }


  @keyframes cloud{
  100%{
    left:150%;
  }
  }

Answer 1

这是一个简单的例子;使用transform而不是left，因为它将使用gpu加速（如果可用）。 overflow-x隐藏在body标签上，以阻止滚动条出现。

body {
  min-width: 100vw;
  overflow-x: hidden;
  
}
.cloud {
  width: 100px;
  height: 50px;
  background: red;
  animation-name: cloud-animation;
  animation-fill-mode: forwards;
  animation-duration: 5s;
}

#cloud-2 {
  animation-delay: 0.2s;
}

#cloud-3 {
  animation-delay: 0.4s;
}

@keyframes cloud-animation {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(100vw);
  }
}

<div id="cloud-1" class="cloud"></div>
<div id="cloud-2" class="cloud"></div>
<div id="cloud-3" class="cloud"></div>

CSS动画：使div浮出文档

1 个答案: