[分享]css3放烟花的代码

CSS3是一种强大的前端技术，可以为网站增添很多酷炫的效果，比如放烟花。/ 下面是实现放烟花的CSS3代码 / / 创建烟花的容器，设置背景色和边框，并设置为绝对定位 / .firework { : ...

CSS3是一种强大的前端技术，可以为网站增添很多酷炫的效果，比如放烟花。

/* 下面是实现放烟花的CSS3代码 */

/* 创建烟花的容器，设置背景色和边框，并设置为绝对定位 */
.firework {
  position: absolute;
  background-color: transparent;
  border: 2px solid #f00;
}

/* 创建烟花的火苗部分，设置宽高、变形和动画效果 */
.firework::before {
  content: ';
  display: block;
  height: 100%;
  width: 25%;
  border-radius: 50%;
  background-color: #f00;
  transform-origin: bottom center;
  transform: scale(1, 0.02);
  animation: fireworkFire 150ms ease-out;
}

/* 创建烟花的花部分，设置宽高、边框和动画效果 */
.firework::after {
  content: ';
  display: block;
  position: absolute;
  top: 20%;
  left: 20%;
  width: 60%;
  height: 60%;
  border-radius: 50%;
  border: 2px solid #f00;
  background-color: transparent;
  transform-origin: center center;
  transform: scale(0);
  animation: firework 2s forwards ease-out;
}

/* 设置烟花花的展开动画 */
@keyframes firework {
  0% {
    transform: scale(0);
  }
  25% {
    transform: scale(1.2);
  }
  50% {
    transform: scale(0.8);
  }
  75% {
    transform: scale(1.1);
  }
  100% {
    transform: scale(1);
  }
}

/* 设置烟花火苗的掉落动画 */
@keyframes fireworkFire {
  0% {
    transform: scale(1, 0.02);
  }
  25% {
    transform: scale(1, 1.7);
  }
  50% {
    transform: scale(1, 0.8);
  }
  75% {
    transform: scale(1, 1.3);
  }
  100% {
    transform: scale(1, 1);
  }
} 

通过上述CSS3代码，我们可以实现一个非常酷炫的放烟花效果。网页前端界面的优化越来越受到重视，掌握CSS3技术无疑是一条值得追求的技能。