css实现烟花效果

最新推荐文章于 2024-05-05 00:24:50 发布

顾鸟

最新推荐文章于 2024-05-05 00:24:50 发布

阅读量5k

点赞数 1

分类专栏： css

本文链接：https://blog.csdn.net/qq_40881695/article/details/112973846

版权

css 专栏收录该内容

8 篇文章 0 订阅

订阅专栏

1. 效果图

在这里插入图片描述

2. html

<body>
  <div id="container">
    <div id="fireworks"><img src="imgs/fireworks.png" alt=""></div>
    <div id="firecracker"><img src="imgs/firecracker.png" alt="" width="8px"></div>
  </div>
</body>

3. css

<style>
    * {
      margin: 0;
      padding: 0;
    }

    html,
    body {
      width: 100%;
      height: 100%;
      background-color: black;
    }

    #container {
      width: 100%;
      height: 100%;
      display: flex;
      align-items: flex-start;
      justify-content: center;
      position: relative;
    }

    #fireworks {
      transform: scale(0);
      /* 参数：name、duration、delay */
      animation: fireworks 3s 2s infinite;
    }

    @keyframes fireworks {
      0% {
        transform: scale(0);
      }

      80% {
        transform: scale(1);
      }

      100% {
        opacity: 0;
      }
    }

    #firecracker {
      position: absolute;
      left: 50%;
      bottom: 0%;
      margin-left: -4px;
      animation: firecracker 3s infinite;
    }

    @keyframes firecracker {
      0% {
        transform: scale(1);
        bottom: 0%;
      }

      100% {
        bottom: 60%;
        transform: scale(0);
      }
    }
  </style>

注：主要用到css3的动画效果

转载：https://www.cnblogs.com/qikeyishu/p/9255589.html

顾鸟

关注

1
点赞
踩
14

收藏

觉得还不错? 一键收藏
3
评论
css实现烟花效果

1. 效果图2. html<body> <div id="container"> <div id="fireworks"><img src="imgs/fireworks.png" alt=""></div> <div id="firecracker"><img src="imgs/firecracker.png" alt="" width="8px"></div> </div
复制链接

扫一扫