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

您好！这里是一个基于 CSS3 的蒲公英飘动效果和云朵飘动效果的示例代码：

HTML 代码：

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

CSS 代码：

/* 设置页面背景色为浅蓝色 */
body {
  background-color: #87CEFA;
}

/* 定义蒲公英的样式 */
.dandelion {
  width: 20px;
  height: 120px;
  position: absolute;
  background-color: #F5DEB3;
  border-radius: 10px;
  animation: dandelion 5s infinite ease-in-out;
}

/* 定义蒲公英的动画效果 */
@keyframes dandelion {
  0% {
    transform: translate(0, 0) rotate(0deg);
  }
  50% {
    transform: translate(200px, -800px) rotate(180deg);
  }
  100% {
    transform: translate(400px, 0) rotate(360deg);
  }
}

/* 定义云朵的样式 */
.cloud {
  width: 200px;
  height: 80px;
  position: absolute;
  background-color: #FFFFFF;
  border-radius: 40px;
  opacity: 0.8;
  animation: cloud 10s infinite ease-in-out;
}

/* 定义云朵的动画效果 */
@keyframes cloud {
  0% {
    transform: translate(-200px, 0);
  }
  50% {
    transform: translate(400px, 0);
  }
  100% {
    transform: translate(-200px, 0);
  }
}

这段代码会在页面中生成一个蒲公英和一个云朵，并分别给它们定义了动画效果，让它们在页面上飘动。您可以根据需要修改代码中的样式和动画效果。