css3蒲公英飘动效果_css3 云朵飘动效果动画_html/css_WEB-ITnose

您好！以下是CSS3实现蒲公英飘动效果和云朵飘动效果的示例代码：

## 蒲公英飘动效果

<div class="dandelion">
  <div class="petal"></div>
  <div class="petal"></div>
  <div class="petal"></div>
  <div class="petal"></div>
  <div class="petal"></div>
  <div class="puff"></div>
</div>

.dandelion {
  position: relative;
  width: 100px;
  height: 100px;
}

.petal {
  position: absolute;
  width: 5px;
  height: 20px;
  border-radius: 5px;
  background-color: #f4d2a9;
  transform-origin: bottom center;
  animation-name: petal-float;
  animation-duration: 3s;
  animation-iteration-count: infinite;
}

.petal:nth-child(1) {
  left: 20%;
  transform: rotate(30deg);
  animation-delay: 0.2s;
}

.petal:nth-child(2) {
  left: 40%;
  transform: rotate(-30deg);
  animation-delay: 0.3s;
}

.petal:nth-child(3) {
  left: 60%;
  transform: rotate(30deg);
  animation-delay: 0.4s;
}

.petal:nth-child(4) {
  left: 80%;
  transform: rotate(-30deg);
  animation-delay: 0.5s;
}

.petal:nth-child(5) {
  left: 50%;
  transform: rotate(0deg);
  animation-delay: 0.6s;
}

.puff {
  position: absolute;
  bottom: 0;
  left: 40%;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background-color: #fff;
  box-shadow: 0 0 10px #fff;
  animation-name: puff-float;
  animation-duration: 3s;
  animation-iteration-count: infinite;
}

@keyframes petal-float {
  0% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-10px);
  }
  100% {
    transform: translateY(0);
  }
}

@keyframes puff-float {
  0% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-5px);
  }
  100% {
    transform: translateY(0);
  }
}

## 云朵飘动效果

<div class="cloud"></div>

.cloud {
  position: absolute;
  top: 50px;
  left: -100px;
  width: 150px;
  height: 80px;
  border-radius: 50px;
  background-color: #fff;
  box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.3);
  animation-name: cloud-float;
  animation-duration: 10s;
  animation-iteration-count: infinite;
}

@keyframes cloud-float {
  0% {
    transform: translateX(-100px);
  }
  50% {
    transform: translateX(300px);
  }
  100% {
    transform: translateX(-100px);
  }
}

希望对您有所帮助！