css动画和渐变

变形：

~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

元素的变形：transform

　　　　　　　　transform:none | <transform-function>

　　　　　　　　　　none：默认值，不设置变形

　　　　　　　　　　<transform-function>：设置变形函数，如旋转rotate()、缩放scale()、移动translate()、倾斜skew()、矩阵变形matrix()。

代码：

 <!DOCTYPE html>
 <html>
 <head lang="en">
     <meta charset="UTF-8">
     <title>动画之简单变化</title>
     <style type="text/css">
         ul {
             margin-top: 30px;
             list-style: none;
             line-height: 25px;
             font-family: Arial;
             font-weight: bold;
         }
         li {
             width: 120px;
             float: left;
             margin: 2px;
             border: 1px solid #cccccc;
             background-color: #e4e4e4;
             text-align: left;
         }
         li:hover {
             background-color: #;
         }
         a {
             display: block;
             padding: 5px 10px;
             color: #;
             /*text-decoration 属性规定添加到文本的修饰。如下划线等*/
             text-decoration: none;
             /*定义原点 */
             transform-origin: ;
         }
         li:nth-child():hover a{
             background-color: #f90;
             /*字体颜色 */
             color: #FF3321;
             /*旋转 */
             transform:rotate(30deg);
         }
         li:nth-child():hover a{
             background-color: #f90;
             /*字体颜色 */
             color: #FF3321;
             /*移动 */
             transform:translate(5px,5px);
         }
         li:nth-child():hover a{
             background-color: #f90;
             /*字体颜色 */
             color: #FF3321;
             /*缩放 */
             transform:scale(0.8,1.5);
         }
         li:nth-child():hover a{
             background-color: #f90;
             /*字体颜色 */
             color: #FF3321;
             /*倾斜 */
             transform:skew(30deg);
         }
     </style>
 </head>
 <body>
 <ul>
     <li><a href="#">html </a></li>
     <li><a href="#">css </a></li>
     <li><a href="#">flash</a></li>
     <li><a href="#">ps</a></li>
 </ul>
 </body>
 </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

矩阵变形：省略吧先，以后研究。

~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

代码：

 <!DOCTYPE html>
 <html>
 <head lang="en">
     <meta charset="UTF-8">
     <title>过渡效果</title>
     <style type="text/css">
         div {
             margin: 100px auto;
             width: 200px;
             height: 100px;
             background-color: #00f;
             /*总写 */
             /*transition:all 1000ms linear 500ms;*/
             /*分写 */
             transition-propety:all;
             transition-duration:1s;
             transition-dely:0.5s;
             transition-tinming-funtion:liner;
         }
         div:hover {
             background-color: #f90;
             transform:rotate(200deg);
         }
     </style>
 </head>
 <body>
 <div></div>
 </body>
 </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>：设置样式

代码：

 <!DOCTYPE html>
 <html>
 <head lang="en">
     <meta charset="UTF-8">
     <title>关键帧动画</title>
     <style type="text/css">
         div {
             position: absolute;
             -moz-animation:mymove 5s infinite;
             -webkit-animation:mymove 5s infinite;
         }
         @-moz-keyframes mymove{
             0% {top:0px;}
             25% {top:200px;left: 200px}
             75% {top:50px;left: 10px}
             100% {top:100px;left: 60px}
         }
         @-webkit-keyframes mymove{
             0% {top:0px;}
             25% {top:200px;left: 200px}
             75% {top:50px;left: 10px}
             100% {top:100px;left: 60px}
         }
     </style>
 </head>
 <body>
 <div><img src="54图片\图1.jpg" width="250" height="200"></div>
 </body>
 </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:与上一周期方向相反