<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

    <style>

        body{

            background-color: black;

        }

        #img1{

            width: 300px;

            height: 230px;

            position: absolute;

            left: 50%;

            margin-left: -150px;

            transform: scale(0,0);

            animation: img1Animation 3s forwards;

            animation-delay: 3s;

        }

        #img2{

            width: 15px;

            height: 50px;

            position: absolute;

            left: 50%;

            margin-left: -7px;

            bottom: 0;

            animation: img2Animation;

            animation-duration: 3s ;

            /*animation-delay: 3s;*/

            animation-fill-mode: forwards;

        }

        @keyframes img2Animation {

            0%{

                bottom: 0;

                left: 50%;

                margin-left: 7px;

            }

            99%{

                bottom: 540px;

                transform: scale(0.5,0.5);

            }

            100%{

                transform: scale(0,0);

            }

        }

        @keyframes img1Animation {

            1%{

                transform: scale(0.5,0.5);

                opacity:0.1;

            }

            99%{

                transform: scale(1,1);

                opacity: 1;

            }

            100%{

                transform: scale(0,0);

            }

        }

    </style>

</head>

<body>

<img id="img1" src="../img/yanhua1.png" alt="">

<img id="img2" src="../img/yanhua2.png" alt="">

</body>

</html>

　　

04.CSS动画示例-->烟花的更多相关文章

  1. 02.CSS动画示例-->鼠标悬停图片旋转

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  2. css动画属性性能

    性能主要表现:流量.功耗与流畅度 在现有的前端动画体系中,通常有两种模式:JS动画与CSS3动画. JS动画是通过JS动态改写样式实现动画能力的一种方案,在PC端兼容低端浏览器中不失为一种推荐方案. ...

  3. 谈谈一些有趣的CSS题目（十四）-- 纯 CSS 方式实现 CSS 动画的暂停与播放！

    开本系列,谈谈一些有趣的 CSS 题目,题目类型天马行空,想到什么说什么,不仅为了拓宽一下解决问题的思路,更涉及一些容易忽视的 CSS 细节. 解题不考虑兼容性,题目天马行空,想到什么说什么,如果解题 ...

  4. 盒子端 CSS 动画性能提升研究

    不同于传统的 PC Web 或者是移动 WEB,在腾讯视频客厅盒子端,接大屏显示器(电视)下,许多能流畅运行于 PC 端.移动端的 Web 动画,受限于硬件水平,在盒子端的表现的往往不尽如人意. 基于 ...

  5. 原生CSS动画回调事件

    原文链接: Detecting CSS Animation Completion with JavaScript 原文日期: 2014年02月20日 翻译日期: 2014年02月21日 翻译人员: 铁 ...

  6. css动画-animation各个属性详解（转）

    CSS3的animation很容易就能实现各种酷炫的动画,虽然看到别人的成果图会觉得很难,但是如果掌握好各种动画属性,做好酷炫吊炸天的动画都不在话下,好,切入正题. 一.动画属性: 动画属性包括:①a ...

  7. 这样使用 GPU 渲染 CSS 动画（转）

    大多数人知道现代网络浏览器使用GPU来渲染部分网页,特别是具有动画的部分. 例如,使用transform属性的CSS动画看起来比使用left和top属性的动画更平滑. 但是如果你问,“我如何从GPU获 ...

  8. CSS动画原理及硬件加速

    一.图层 图层即层叠上下文,具体概念和应用大家可以看我之前转自张鑫旭大神博客的<CSS层叠上下文和层叠顺序>,这里我们简单复习一下产生层叠上下文的原因. 1.根层叠上下文 指的是页面根元素 ...

  9. canvas高级动画示例

    canvas高级动画示例 演示地址 https://qzruncode.github.io/example/index.html <!DOCTYPE html> <html lang ...

随机推荐

  1. Linux 服务器加入Windows AD

    背景信息: Windows AD Version: Windows Server 2012 R2 zh-cn 计算机全名:hlm12r2n1.hlm.com 域:hlm.com 域控管理员:stone ...

  2. 【笔记】AJAX+SweetAlert插件实现删除操作

    [笔记]AJAX+SweetAlert插件实现删除操作 Django AJAX SweetAlert  展示 SweetAlert 插件介绍 SweetAlert 是一个 JS 插件,能够完美替代 J ...

  3. [BZOJ 5323][Jxoi2018]游戏

    传送门 \(\color{green}{solution}\) 它每次感染的人是它的倍数,那么我们只需要找出那些除了自己以外在\(l\), \(r\)内没有别的数是 它的约数的数,在这里称其为关键数. ...

  4. 初入Android Studio的我

    最近由于工作上的需要,领导让我去学点Android  以前因为兴趣的原因也自己搞过一点点  所以就欣然领命了 那么在此之前 我们来了解一下什么是Android 这是链接 自己去看吧 哈哈哈 https ...

  5. session_destroy()和session_unset()的理解

    session_destroy 是注销所有的session变量,并且结束session会话目前是删除当前用户对应的session文件以及释放session id值 ,但是但是 内存中的$_SESSIO ...

  6. RocketMQ详解

    原文链接:http://www.cnblogs.com/xiaodf/p/5075167.html 简介 官方简介: RocketMQ是一款分布式.队列模型的消息中间件,具有以下特点:  能够保证严格 ...

  7. python 进程与线程（理论部分）

    一.理论部分 一 什么是进程 进程:正在进行的一个过程或者说一个任务.而负责执行任务则是cpu. 举例(单核+多道,实现多个进程的并发执行): egon在一个时间段内有很多任务要做:python备课的 ...

  8. C#原生压缩和解压缩方法

    string path = AppDomain.CurrentDomain.BaseDirectory; string startPath = @"c:\Client"; stri ...

  9. RabbitMQ初学之一:exchange与queue的绑定

    最近公司需要使用RabbitMQ,但我之前一直使用的是ActiveMQ,对RabbitMQ进行了初步的学习,但是还不系统,自己做了一些小测试,怕自己以后忘了 一. 背景 拿到代码以后,发现,生产者在向 ...

  10. jenkins配置构建执行状态

    运行构建 在项目 左侧列表点击 “立即构建” ,在 “Build History” 列表中,会看到执行状态,蓝色圆点表示构建成功,红色圆点表示构建失败 点击 构建失败的任务(红色的小圆点).然后点击“ ...