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

<!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>

素材：demo.zip

CSS3实现烟花特效 --web前端的更多相关文章

  1. web前端开发书籍推荐_css/css3的好书有哪些？

    css/css3样式已是web前端开发的主流技术了.每个优秀的前端程序员都应该熟悉,甚至精通css.那么要如何才能学好css,并很好的应用到实际开发中,这篇文章就推荐一些关于css相关的书籍给大家. ...

  2. 整理六百篇web前端知识混总

    9个有用的和免费的工具来支持动态网页开发 8个基本的引导工具的网页设计师 11款CSS3动画工具的开发 2016年某前端群题目答案参考 9最好的JavaScript压缩工具 创建响应式布局的10款优秀 ...

  3. Web前端 Web前端和Web后端的区分

    一.绪论 1. 前台:呈现给用户的视觉和基本的操作. 后台:用户浏览网页时,我们看不见的后台数据跑动.后台包括前端.后端. 前端:对应我们写的html.css.javascript 等网页语言作用在前 ...

  4. 想转行做web前端工程师，必学这5大技能！知道是那些吗？

    web前端工程师是近几年才发展出来的新兴职业,也是目前火爆且高薪的职业. 大需求的市场环境下,出现了越来越多的人群转行做web前端工程师,如设计师.后台程序员.网虫.大学其他专业.策划.编辑等等. 要 ...

  5. Web前端和Web后端的区分

    版权声明:本文为CSDN博主「十豆三展」的原创文章,遵循CC 4.0 by-sa版权协议,转载请附上原文出处链接及本声明.原文链接:https://blog.csdn.net/zz1399590022 ...

  6. web前端学习（三）css学习笔记部分（5）-- CSS动画--页面特效、HTML与CSS3简单页面效果实例

    CSS动画--页面特效部分内容目前仅仅观看了解内容,记录简单笔记,之后工作了进行内容的补充 7.  CSS动画--页面特效 7.1  2D.3D转换 7.1.1  通过CSS3转换,我们能够对元素进行 ...

  7. 10款web前端基于html5/CSS3应用特效

    1.jQuery百叶窗效果焦点图 多种百叶窗动画方式 对于百叶窗动画效果,我们介绍的不是很多,目前就介绍过一款CSS3百叶窗图片切换.这次要给大家带来一个基于jQuery的多种百叶窗动画效果焦点图,焦 ...

  8. Web 前端开发精华文章推荐（jQuery、HTML5、CSS3）【系列十二】

    2012年12月12日,[<Web 前端开发人员和设计师必读文章>系列十二]和大家见面了.梦想天空博客关注 前端开发 技术,分享各种增强网站用户体验的 jQuery 插件,展示前沿的 HT ...

  9. Web 前端开发精华文章集锦（jQuery、HTML5、CSS3）【系列十七】

    <Web 前端开发精华文章推荐>2013年第五期(总第十七期)和大家见面了.梦想天空博客关注 前端开发 技术,分享各种增强网站用户体验的 jQuery 插件,展示前沿的 HTML5 和 C ...

随机推荐

  1. python --- 21 MRO C3算法

    一.python2.2之前用的是   经典类的MRO继承 ①深度递归继承     从左到右 ,一条路走到黑 ②广度继承           一层一层的继承 深度继承时   为   R 1 2 3 4 ...

  2. python --- 17. 面向对象成员

    面向对象的成员 能写的所有成员 一.变量 1.实例变量 访问时      对象.变量 2.类变量 访问时     类名.变量 注意: 二.方法 1.实例方法 必须有一个参数(self) 调用时    ...

  3. 设置Eclipse具有字母自动联想

    Window->Preferences->Java->Editor->ContentAssist(内容助手)里面的Enable auto activation里面第二行再加上a ...

  4. topcoder srm 310 div1

    problem1 link 先计算出最上面.最下面一层,根据最上面一层的数量计算答案. import java.util.*; import java.math.*; import static ja ...

  5. 修改userdata的分区大小【转】

    本文转载自:https://blog.csdn.net/mike8825/article/details/49833833 版权声明:本文为博主原创文章,未经博主允许不得转载.    https:// ...

  6. 检测浏览器(BOM)以及地址栏网址的API

    navigator.userAgent //检测浏览器的版本以及那个厂商的 (不怎么准,你比如360经常跟别人干架,所以别人检测到360浏览器就提示浏览器危险,所以360就自己修改了) //分解这个地 ...

  7. 2、iptables基本应用

    iptables:规则管理工具 添加.修改.删除.显示等: 规则和链有计数器: pkts:  由规则或链所匹配到的报文的个数: bytes:由规则或链匹配到的所有报文大小之和: iptables命令: ...

  8. Python dict 将元祖转成字典

    dict 关键字 dict3=dict(((),(),())) #dict 只有一个参数 输出:{'a': 97, 'b': 98, 'c': 99}

  9. Webpack+React项目入门——入门及配置Webpack

    一.入门Webpack 参考文章:<入门Webpack,看这篇就够了> 耐心看完这篇非常有帮助 二.React+Webpack环境配置 参考文章:<webpack+react项目初体 ...

  10. php中if(\$a==\$b)和if(\$a=\$b)什么区别？

    <?php // if($a==$b)和if($a=$b)什么区别? $a = 1; $b = 1; if ($a == $b) { // 通过 echo '通过'.PHP_EOL; } if ...