css动画和渐变
变形：
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
元素的变形：transform
transform:none | <transform-function>
none：默认值，不设置变形
<transform-function>：设置变形函数，如旋转rotate()、缩放scale()、移动translate()、倾斜skew()、矩阵变形matrix()。
代码：
1 <!DOCTYPE html> 2 <html> 3 <head lang="en"> 4 <meta charset="UTF-8"> 5 <title>动画之简单变化</title> 6 <style type="text/css"> 7 ul { 8 margin-top: 30px; 9 list-style: none; 10 line-height: 25px; 11 font-family: Arial; 12 font-weight: bold; 13 } 14 li { 15 width: 120px; 16 float: left; 17 margin: 2px; 18 border: 1px solid #cccccc; 19 background-color: #e4e4e4; 20 text-align: left; 21 } 22 li:hover { 23 background-color: #999999; 24 } 25 a { 26 display: block; 27 padding: 5px 10px; 28 color: #333333; 29 /*text-decoration 属性规定添加到文本的修饰。如下划线等*/ 30 text-decoration: none; 31 /*定义原点 */ 32 transform-origin:0 0; 33 } 34 li:nth-child(1):hover a{ 35 background-color: #f90; 36 /*字体颜色 */ 37 color: #FF3321; 38 /*旋转 */ 39 transform:rotate(30deg); 40 } 41 li:nth-child(2):hover a{ 42 background-color: #f90; 43 /*字体颜色 */ 44 color: #FF3321; 45 /*移动 */ 46 transform:translate(5px,5px); 47 } 48 li:nth-child(3):hover a{ 49 background-color: #f90; 50 /*字体颜色 */ 51 color: #FF3321; 52 /*缩放 */ 53 transform:scale(0.8,1.5); 54 } 55 li:nth-child(4):hover a{ 56 background-color: #f90; 57 /*字体颜色 */ 58 color: #FF3321; 59 /*倾斜 */ 60 transform:skew(30deg); 61 } 62 </style> 63 </head> 64 <body> 65 <ul> 66 <li><a href="#">html 5</a></li> 67 <li><a href="#">css 3</a></li> 68 <li><a href="#">flash</a></li> 69 <li><a href="#">ps</a></li> 70 </ul> 71 </body> 72 </html>
旋转：rotate(<angle>)
angle：旋转角度，代为deg，正值顺时针，负值逆时针。
缩放和翻转：scale(<x>,<y>)
<x>：水平方向放大倍数
<y>：垂直方向放大倍数
注释：中间用逗号隔开数值，大于1表示放大，小于1表示缩放。为负数表示翻转。如果y值省略，会水平方向和垂直方向上放大或缩放相同倍数。
移动：translate(<dx>,<dy>)
<dx>：元素在水平方向上的偏移距离
<dy>：元素在垂直方向上的偏移距离
注释：<dx><dy>可为负值或带小数的的值。偏移方向不解释。若<dy>的值省略，则垂直偏移距离为0
倾斜：skew(<x-angle>,<y-angle>)
<x-angle>：元素在空间x轴上的倾斜角度
<y-angle>：元素在空间y轴上的倾斜角度
注释：<x-angle><y-angle>单位deg，值为正，顺时针，值为负，逆时针。若<y-angle>值省略，则在垂直方向上的倾斜角度为0deg
矩阵变形：省略吧先，以后研究。
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
代码：
1 <!DOCTYPE html> 2 <html> 3 <head lang="en"> 4 <meta charset="UTF-8"> 5 <title>过渡效果</title> 6 <style type="text/css"> 7 div { 8 margin: 100px auto; 9 width: 200px; 10 height: 100px; 11 background-color: #00f; 12 /*总写 */ 13 /*transition:all 1000ms linear 500ms;*/ 14 /*分写 */ 15 transition-propety:all; 16 transition-duration:1s; 17 transition-dely:0.5s; 18 transition-tinming-funtion:liner; 19 } 20 div:hover { 21 background-color: #f90; 22 transform:rotate(200deg); 23 } 24 </style> 25 </head> 26 <body> 27 <div></div> 28 </body> 29 </html>
定义变形原点：transform-origin
transform-origin:<x> <y>
<x>：定义变形原点的x位置
<y>：定义变形原点的y位置
注释：<x>默认值是50%，取值包括left、center、right、百分比值，长度值
<y>默认值是50%，取值包括top、middle、bottom、百分比值、长度值
过渡效果：transition：transition-property | transition-duration | transition-timing-function | transition-delay
transition-property：定义过渡属性
none：没有过渡效果
all：默认值，所有的css属性都有过渡效果
<property>：指定一个用逗号分隔的多个属性，针对指定的这些属性有过渡效果
transition-duration：定义过渡过程的需要的时间
<time>：时间可以是秒或毫秒，默认是0
transition-timing-function：定义过渡方式
linear：一直是同一速度
ease：先慢，再快，最后非常慢
ease-in：先慢，再快，直至结束
ease-out：先快，再慢，直至结束
ease-in-out：在开始和结束时，都很慢
cubic-bezier(n,n,n,n)：自定义贝塞尔曲线，参数为0到1的数字。
transition-delay：定义开始过渡的延迟时间
<time>：同transition-duration中的<time>
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
关键帧动画：@keyframes <animationname> {<keyframes-selector>{<css-styles>}}
<animationname>：动画的名称，用于绑定
<keyframes-selector>：动画持续时间的百分比
<css-styles>：设置样式
代码：
1 <!DOCTYPE html> 2 <html> 3 <head lang="en"> 4 <meta charset="UTF-8"> 5 <title>关键帧动画</title> 6 <style type="text/css"> 7 div { 8 position: absolute; 9 -moz-animation:mymove 5s infinite; 10 -webkit-animation:mymove 5s infinite; 11 } 12 @-moz-keyframes mymove{ 13 0% {top:0px;} 14 25% {top:200px;left: 200px} 15 75% {top:50px;left: 10px} 16 100% {top:100px;left: 60px} 17 } 18 @-webkit-keyframes mymove{ 19 0% {top:0px;} 20 25% {top:200px;left: 200px} 21 75% {top:50px;left: 10px} 22 100% {top:100px;left: 60px} 23 } 24 </style> 25 </head> 26 <body> 27 <div><img src="54图片\图1.jpg" width="250" height="200"></div> 28 </body> 29 </html>
解释：那个百分比指的是时间，即时间轴
动画属性：animation:
-name：动画的名称，类似于Flash中的元件
none：没有动画
<keyname>：动画名称
-duration：定义动画播放的周期时间
<time>：略
-timing-function
linear,ease,ease-in,ease-out,ease-in-out,cubic-bezier(n,n,n,n)
-delay：动画播放延迟时间
<time>
-iteration-count：定义播放次数
infinite：无限次播放
<n>；确定的次数，默认是1
-direction：播放的方向
normal：默认值
alternate:与上一周期方向相反
