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

<!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. 异步任务利器Celery(二)在django项目中使用Celery

    Celery 4.0支持django1.8及以上的版本,低于1.8的项目使用Celery 3.1. 一个django项目的组织如下: - proj/ - manage.py - proj/ - __i ...

  2. ml机器学习笔记

    一.安装机器学习的包 1.conda create -n ml python=3.6 2.source activate ml 3.升级pip :pip install --upgrade pip 4 ...

  3. 【python014--字符串内置函数】

    一.实现跨越多行的字符串 1.采用双引号实现 str1 = ""待我长发及腰,将军归来可好?此身君子意逍遥,怎料山河萧萧天光乍破遇,暮雪白头老寒剑默听奔雷,长枪独守空豪醉卧沙场君莫 ...

  4. js的原型prototype究竟是什么？

    Javascript也是面向对象的语言,但它是一种基于原型Prototype的语言,而不是基于类的语言.在Javascript中,类和对象看起来没有太多的区别. 1.什么是prototype: fun ...

  5. Linux 使用statvfs读取文件系统信息

    本文转载自:https://blog.csdn.net/papiping/article/details/6980573 在测试过程中,f_bfree的值比f_frsize的值大于10%的尺寸大小,意 ...

  6. （转）MongoDB学习

    (二期)25.分布式文件存储数据库MongoDB [课程25]mongod...命令.xmind96.9KB [课程25]MongoD...概念.xmind0.5MB [课程25]MongoDB简介. ...

  7. 关于 RabbitMQ 的 Dead-Letters-Queue “死信队列”

      来自一个队列的消息可以被当做‘死信’,即被重新发布到另外一个“exchange”去,这样的情况有: 消息被拒绝 (basic.reject or basic.nack) 且带 requeue=fa ...

  8. 【拼接属性查询方式】MySql某一列属性值为拼接时的查询方式

    数据库中某一列的值为 使用IN查询是无法查询到数据的,只能查询到IN(2)或者IN(2,3)  查询结果: , style_id) 正确方式:使用FIND_IN_SET函数 , style_id) , ...

  9. How do I extract a single column from a data.frame as a data.frame

    Say I have a data.frame: df <- data.frame(A=c(10,20,30),B=c(11,22,33), C=c(111,222,333))  A  B  C ...

  10. P4238 【模板】多项式求逆

    思路 多项式求逆就是对于一个多项式\(A(x)\),求一个多项式\(B(x)\),使得\(A(x)B(x) \equiv 1 \ (mod x^n)\) 假设现在多项式只有一项,显然\(B(x)\)的 ...