CSS3实现烟花特效 --web前端

最新推荐文章于 2024-07-29 16:48:07 发布

前端老码农

最新推荐文章于 2024-07-29 16:48:07 发布

阅读量5.3k

点赞数 3

分类专栏：前端文章标签： CSS3 web前端动画效果

原文链接：https://www.mk2048.com/blog/blog.php?id=10h2j0j&title=CSS3%E5%AE%9E%E7%8E%B0%E7%83%9F%E8%8A%B1%E7%89%B9%E6%95%88+--web%E5%89%8D%E7%AB%AF

版权

前端专栏收录该内容

2065 篇文章 12 订阅

订阅专栏

烟花特效，比较简单，直接贴代码了……

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>css3实现烟花特效</title>
 <style>
 * {
 margin: 0;
 padding: 0;
 }
 html{
 width: 100%;
 height: 100%;
 }
 body{
 width: 100%;
 height: 100%;
 }
 #container{
 width: 100%;
 height: 100%;
 background-color: black;
 position: relative;
 }
 #fireworks{
 position: absolute;
 left: 50%;
 margin-left: -250px;
 bottom: 60%;
 margin-bottom: -180px;
 transform: scale(0);
 animation: fireworks 5s 3s;
 }

 @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 forwards;
 }

 @keyframes firecracker {
 0%{
 transform: scale(1);
 bottom: 0%;
 }
 100%{
 bottom: 60%;
 transform: scale(0);
 }
 }
 </style>
</head>
<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>
</html>