CSS3动画变形Animations
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>CSS3动画功能Animations</title>
</head>
<style> #animations{
width:200px ;
height:200px ;
background-color: #3598DC;
}
@-webkit-keyframes mycolor{
0%{
background-color: #dc3646; /*加载百分之0%，变色，加宽，旋转20度*/
width:230px ;
-webkit-transform:rotate(20deg);
}
20%{
background-color: #70dc27; /*加载百分之20%，变色，加宽，旋转60度*/
width:250px ;
-webkit-transform:rotate(60deg); }
50%{
background-color: #a628dc; /*加载百分之50%，变色，加宽，旋转20度，移动30px，30px，*/
width:260px ;
-webkit-transform:rotate(20deg);
-webkit-transform:translate(30PX,30PX);
}
80%{
background-color: #dcc419;
width:280px ;
-webkit-transform:rotate(0deg);
-webkit-transform:translate(50PX,50PX);
}
100%{
background-color: #dc3646;
width:300px ;
-webkit-transform:rotate(180deg);
}
}
#animations:hover{
-webkit-animation-name: mycolor; /*关键帧名字*/
-webkit-animation-duration: 5s; /*变换延续时间*/
-webkit-animation-timing-function: linear; /*变换的速率变化*/
-webkit-animation-iteration-count: 2;
} </style>
<body>
<div id="animations"></div> <!--<div id="rotat">rotate旋转</div>-->
<!--<div id="scale">scale缩放</div>-->
<!--<div id="skew">skew 倾斜</div>-->
<!--<div id="translate">translate移动</div>-->
<!--<p>旋转，倾斜 缩放 移动 transform</p>-->
</body> </html>
CSS3动画功能Animations
CSS3动画变形Animations的更多相关文章
- css3 动画应用 animations 和transtions transform在加上JavaScript 可以实现硬件加速动画。
transitions(过渡) 被应用于元素指定的属性变化时,该属性经过一段时间逐渐的过渡到最终想要的值. 主要包括四个属性: 执行变换的属性:transition-property 变换延续的时间: ...
- CSS3动画变形transition
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...
- css3中变形与动画（三）
transform可以实现矩阵变换,transition实现属性的平滑过渡,animation意思是动画,动漫,这个属性才和真正意义的一帧一帧的动画相关.本文就介绍animation属性. anima ...
- CSS3的变形transform、过渡transition、动画animation学习
学习CSS3动画animation得先了解一些关于变形transform.过渡transition的知识 这些新属性大多在新版浏览器得到了支持,有些需要添加浏览器前缀(-webkit-.-moz-.- ...
- css3动画由浅入深总结
阅读目录 一:过渡动画---Transitions 二:Animations功能 三:translate(tx,ty) 四:scale(x,y) 五:rotate(x): 5.1:skew(x,y): ...
- CSS3 动画基础
该文为译文转载,原文地址:http://tech.163.com/mobile/10/0106/09/5SB96QSM00112K88.html 译文:你需要知道的CSS3 动画技术 原文:Wha ...
- 如何使用js捕获css3动画
如何使用js捕获css3动画 css3动画功能强大,但是不像js,没有逐帧控制,但是可以通过js事件来确定任何动画的状态. 下面是一段css3动画代码: #anim.enable{ -webkit-a ...
- CSS3动画几个平时没注意的属性
一.timing-function: steps() 一开始在使用CSS3的时候并没有太注意这个timing-function,只是注意到自定义贝塞尔曲线. 1)一个项目中的实例 先来看看左边加了st ...
- JavaScript - 基于CSS3动画的实现
在痛苦的IE8时代,所有的动画都只能基于自己计算相关动画属性,开定时器setTimeout/setInterval轮询动画任务. 而肩负重任的HTML5,早已注意到了日益增强的动画,随着HTML5的降 ...
随机推荐
- gpload的简单实用
准备工作: 1.因为gpload是对gpfdist的封装,因此使用gpload之前必须开启gpfdist的服务,不然无法使用. gpfdist -d /home/admin -p 8181 -l /t ...
- asp.net Linq 实现分组查询
首先我们还是先建立一个person.cs类 public class person { public string name { get; set; } public int age { get; s ...
- 读取XML文件节点数据
xml测试文件为 <?xml version="1.0" standalone="yes"?> <NewDataSet> <xs: ...
- shell 1变量注意点
定义变量时,变量名不加美元符号($),如: variableName="value" 注意,变量名和等号之间不能有空格,这可能和你熟悉的所有编程语言都不一样. 删除变量 使用 un ...
- PM【terminal】
More Knowledge More Performance More Time 资料模组化 以知识管理为基础的项目管理 规范:ethic
- PDF抽取文字 C# with Adobe API
前提是PDF里面是有文字的! 一次性取得所有页内容: /// <summary> /// 改进前取得所有页的所有word /// </summary> /// <para ...
- 关于微软RDLC报表打印时文字拉伸问题（Windows server 2003 sp2)
最近我们开发的打印服务频频出现打印文字拉伸问题,客户意见络绎不绝,最为明显的是使用黑体加粗后 “2.0份” 打印出来后小数点几乎看不见了,用户很容易误认为 “ 20份” .所以问题达到了不得不停下手上 ...
- 【C语言】中的stdbool.h头文件
C语言中的stdbool.h头文件 一.相关基础知识 二.具体内容 Win7下安装的VS2015中的stdbool.h的位置为: F:\Program Files (x86)\Microsoft Vi ...
- Early 80386 CPUs
Assembling a detailed and accurate history of the 80386, including a complete listing of all the &qu ...
- 上网必备AdBlock，远离广告！
浏览器广告拦截插件,绝对上网必备... 从此告别讨厌的百度边栏广告!!! https://getadblock.com/ https://adblockplus.org/zh_CN/