04.CSS动画示例-->烟花
<!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动画示例-->烟花的更多相关文章
- 02.CSS动画示例-->鼠标悬停图片旋转
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- css动画属性性能
性能主要表现:流量.功耗与流畅度 在现有的前端动画体系中,通常有两种模式:JS动画与CSS3动画. JS动画是通过JS动态改写样式实现动画能力的一种方案,在PC端兼容低端浏览器中不失为一种推荐方案. ...
- 谈谈一些有趣的CSS题目（十四）-- 纯 CSS 方式实现 CSS 动画的暂停与播放！
开本系列,谈谈一些有趣的 CSS 题目,题目类型天马行空,想到什么说什么,不仅为了拓宽一下解决问题的思路,更涉及一些容易忽视的 CSS 细节. 解题不考虑兼容性,题目天马行空,想到什么说什么,如果解题 ...
- 盒子端 CSS 动画性能提升研究
不同于传统的 PC Web 或者是移动 WEB,在腾讯视频客厅盒子端,接大屏显示器(电视)下,许多能流畅运行于 PC 端.移动端的 Web 动画,受限于硬件水平,在盒子端的表现的往往不尽如人意. 基于 ...
- 原生CSS动画回调事件
原文链接: Detecting CSS Animation Completion with JavaScript 原文日期: 2014年02月20日 翻译日期: 2014年02月21日 翻译人员: 铁 ...
- css动画-animation各个属性详解（转）
CSS3的animation很容易就能实现各种酷炫的动画,虽然看到别人的成果图会觉得很难,但是如果掌握好各种动画属性,做好酷炫吊炸天的动画都不在话下,好,切入正题. 一.动画属性: 动画属性包括:①a ...
- 这样使用 GPU 渲染 CSS 动画（转）
大多数人知道现代网络浏览器使用GPU来渲染部分网页,特别是具有动画的部分. 例如,使用transform属性的CSS动画看起来比使用left和top属性的动画更平滑. 但是如果你问,“我如何从GPU获 ...
- CSS动画原理及硬件加速
一.图层 图层即层叠上下文,具体概念和应用大家可以看我之前转自张鑫旭大神博客的<CSS层叠上下文和层叠顺序>,这里我们简单复习一下产生层叠上下文的原因. 1.根层叠上下文 指的是页面根元素 ...
- canvas高级动画示例
canvas高级动画示例 演示地址 https://qzruncode.github.io/example/index.html <!DOCTYPE html> <html lang ...
随机推荐
- Learn to See in the Dark（论文阅读笔记）
最近做项目看了一篇论文<Learn to See in the Dark>下面是一些论文笔记 概括: 这篇论文主要介绍的是在低光照的环境下用两个标准的FCN网络,通过控制变量法来对比不同的 ...
- Vue 不睡觉教程2 - 洋气的文件结构
目标书接上回,上回那个例子实在太土了.实际开发中我们不可能把整个网站的js和html全写到一个页面上.所以我们这节课的目标在于改造这个例子的文件结构,让它不那么土Let's do it 环境参数vue ...
- P4177 [CEOI2008]order
传送门 答案等于总工作价值减去最小失去的价值 考虑构建最小割模型 在 $S$割 的点表示选,在 $T$割 的点表示不选 对于机器(编号从 $n+1$ 到 $n+m$) $n+i$,连边 $(n+i,T ...
- Eclipse下，修改MAVEN 中央仓库地址，解决maven下载慢问题
作用于所有工作空间: 1.逐项打开:eclipse->preference->Maven->User Settings.按窗口中的User Settings文本框显示的路径,创建se ...
- UI的线程问题：单线程原因及更新UI的四种方式
1.UI线程为什么设计为单线程? UI控件的操作不是线程安全的,对于多线程并发访问的时候,如果使用加锁机制会导致: UI控件的操作变得很复杂. 加锁的操作必定会导致效率下降. 所以android系统在 ...
- 16.Generator函数的语法
1.简介 Generator 函数是 ES6 提供的一种异步编程解决方案,语法行为与传统函数完全不同. 执行 Generator 函数会返回一个遍历器对象,也就是说,Generator 函数除了状态机 ...
- PHP之string之rtrim()函数使用
rtrim (PHP 4, PHP 5, PHP 7) rtrim - Strip whitespace (or other characters) from the end of a string ...
- 第六章、Linux 的文件权限与目录配置
第六章.Linux 的文件权限与目录配置 1. 使用者与群组 2. Linux文件权限概念 2.1 Linux文件属性 2.2 如何改变文件属性与权限: chgrp, chown, chmod 2.3 ...
- 码表的理解(ASCII,GBK,Unicode,UTF-8等)。
以下任何言论都完全是个人的理解,如有雷同纯属巧合,如有错误,希望大家多多指出,共同学习!谢谢! 笔者是一个理解能力偏慢.稍钻牛角尖的程序员,什么东西都要从最基础理解起,一步一步向上理解,因此讲述时也是 ...
- JavaScript函数——闭包
闭包 概念 只有函数内部的子函数才能读取局部变量,所以闭包可以理解成"定义在一个函数内部的函数".在本质上,闭包是将函数内部和函数外部连接起来的桥梁 例子 function out ...