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

<!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. bzoj 1420 Discrete Root - 原根 - exgcd - BSGS

    题目传送门 戳我来传送 题目大意 给定$k, p, a$,求$x^{k}\equiv a \pmod{p}$在模$p$意义下的所有根. 考虑模$p$下的某个原根$g$. 那么$x  = g^{ind_ ...

  2. centos7 update docker

    yum erase docker docker-common docker-client docker-compose -y 编辑一个docker镜像源 vim /etc/yum.repos.d/do ...

  3. kaptcha验证码实现，配合spring boot使用

    一.kaptcha介绍 Kaptcha是谷歌放在github上的一个验证码jar包,我们可以简单配置属性实现验证码的验证功能. kaptcha参数设置如下所示: Constant 描述 默认值 kap ...

  4. npm的安装和使用?

    参考: http://www.cnblogs.com/chyingp/p/npm.html 在css中使用变量, 采用less或sass来编译css 改变网页网站开发和构建的方式, 除了用emmet( ...

  5. BZOJ2306: [Ctsc2011]幸福路径

    Description 有向图 G有n个顶点 1, 2, -, n,点i 的权值为 w(i).现在有一只蚂蚁,从 给定的起点 v0出发,沿着图 G 的边爬行.开始时,它的体力为 1.每爬过一条 边,它 ...

  6. LOJ6284 数列分块入门8（分块）

    两个锅 一个是sametag[i]==c 另一个是a[j]不要写成a[i] #include <cstdio> #include <cstring> #include < ...

  7. 【ASP.NET】System.Web.Routing - StopRoutingHandler Class

    Provides a way to specify that ASP.NET routing should not handle requests for a URL pattern. ex: rou ...

  8. Google advertiser api开发概述

    对象.方法和服务 AdWords API 主要供 AdWords 的高级用户使用.如果您是 AdWords 新手,或需要复习 AdWords 基本概念,请查看 AdWords 基础知识页面. 对象层级 ...

  9. .net core 问题：413 Request Entity Too Large nginx

    https://stackoverflow.com/questions/38698350/increase-upload-file-size-in-asp-net-core The other ans ...

  10. kylin3

    RDBMS: 关系数据库管理系统(Relational Database Management System),是将数据组织为相关的行和列的系统,而管理关系数据库的计算机软件就是关系数据库管理系统, ...