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

<!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. 如何利用好github的问题

    github对我来说真的是一个超好的平台,不过之前只是把它仓库来使用, 后来在大佬告诉我应该怎么使用github,今天就来总结下如何利用好github,让它发挥最大的威力. 1.把github当做百科 ...

  2. Python3基础 dict setdefault 根据键查找值，找不到键会添加

             Python : 3.7.0          OS : Ubuntu 18.04.1 LTS         IDE : PyCharm 2018.2.4       Conda ...

  3. 2.Android硬件访问服务编写系统代码【转】

    本文转载自:https://blog.csdn.net/qq_33443989/article/details/76696772 版权声明:本文为博主(Tower)自学笔记,欢迎转载! :-)     ...

  4. JMeter常用菜单以及设置

    如何清空View Results Tree 先选中目标view results tree,然后在菜单上选择Run-->Clear https://stackoverflow.com/questi ...

  5. How to know the directory size in CENTOS 查看文件夹大小

    Under any linux system, you want to use the command du. (Disk Usage) Common usage is : du -sh file(s ...

  6. orcl 之 导入和导出

     dmp文件导入 //1 oracle的数据模式是:用户建在表空间上,表建在用户上 //2 一个用户的表就象自己的私有财产一样,没有自己或管理员授权别的用户是不能查询或修改的: //3 对于不同用户下 ...

  7. P4592 [TJOI2018]异或

    吐槽 睡起来写道模板清醒一下 貌似有两个log的树剖写法,还有一个log的Trie树的差分做法(类似于count on a tree),然后一个log的要把两个询问分开写,一个dfs序一个差分,然后我 ...

  8. P2057 [SHOI2007]善意的投票

    思路 简单的最小割模型 最小割的模型就是选出一些边,把点集划分成S和T两个部分,使得代价最小 到这题上就是板子了 代码 #include <cstdio> #include <alg ...

  9. P3455 [POI2007]ZAP-Queries（莫比乌斯反演）

    思路 和YY的GCD类似但是更加简单了 类似的推一波公式即可 \[ F(n)=\sum_{n|d}f(d) \] \[ f(n)=\sum_{n|d}\mu(\frac{d}{n})F(d) \] \ ...

  10. js变量按照存储方式区分，有哪些类型，并表述其特点

    // 值类型 拷贝形式 不像引用类型是指针指向,共用空间 值类型有 undefined string number Boolean var a = 100; var b = a; var a = 20 ...