新年快乐，动态烟花及祝福代码，能通过微信发送

最新推荐文章于 2024-05-05 10:55:46 发布

王元祺

最新推荐文章于 2024-05-05 10:55:46 发布

阅读量2.6k

点赞数 2

本文链接：https://blog.csdn.net/weixin_35757191/article/details/129449419

版权

新年快乐！

这是一个动态烟花代码的例子：

<!DOCTYPE html>
<html>
<head>
<style>
body {
  background-color: black;
}

.fireworks {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.fireworks__firework {
  position: absolute;
  top: -10%;
  left: 0%;
  width: 1px;
  height: 1px;
  background-color: white;
  border-radius: 50%;
  animation: firework 1s ease-in-out infinite;
}

@keyframes firework {
  0% {
    top: -10%;
    left: 0%;
    width: 1px;
    height: 1px;
    opacity: 1;
  }
  25% {
    width: 6px;
    height: 6px;
    opacity: 1;
  }
  50% {
    width: 12px;
    height: 12px;
    opacity: 0.5;
  }
  75% {
    width: 24px;
    height: 24px;
    opacity: 0;
  }
  100% {
    top: 110%;
    left: 50%;
    width: 6px;
    height: 6px;
    opacity: 0;
  }
}

.fireworks__firework--red {
  --bg-color: #f44336;
  animation-delay: 0s;
}

.fireworks__firework--yellow {
  --bg-color: #ffff00;
  animation-delay: 0.2s;
}

.fireworks__firework--blue {
  --bg-color: #2196f3;
  animation-delay: 0.4s;
}

.fireworks__firework--green {
  --bg-color: #4caf50;
  animation-delay: 0.6s;
}
</style>
</head>
<body>

<div class="fireworks">
  <div class="fireworks__firework fireworks__firework--red"></div>
  <div class="fireworks__firework fireworks__firework--yellow"></div>
  <div class="fireworks__firework fireworks__firework--blue"></div>
  <div class="fireworks__firework fireworks__firework--green"></div>
</div>

</body>
</html>

王元祺

关注

2
点赞
踩
6

收藏

觉得还不错? 一键收藏
0
评论
新年快乐，动态烟花及祝福代码，能通过微信发送

新年快乐！这是一个动态烟花代码的例子：<!DOCTYPE html><html><head><style>body { background-color: black;}.fireworks { position: absolute; top: 50%; left: 50%; transform: transla...
复制链接

扫一扫