来源：自学PHP网 时间：2015-04-14 14:51 作者： 阅读:次
[导读] Transition1 简写属性transition,可以包括四个属性，这四个属性的顺序按照下面介绍的顺序书写，即transition：property duration timing-function delay。2 transition-property表示属性值，例如width,height...
|
Transition
1.简写属性transition,可以包括四个属性，这四个属性的顺序按照下面介绍的顺序书写，即transition：property duration timing-function delay。
2.transition-property表示属性值，例如width,height等等
3.transition-duration过渡效果花费的时间，默认值为0
4.transition-timing-function规定过渡效果的时间曲线，形式有很多种。
linear 规定以相同速度开始至结束的过渡效果（等于 cubic-bezier(0,0,1,1)）。
ease 规定慢速开始，然后变快，然后慢速结束的过渡效果（cubic-bezier(0.25,0.1,0.25,1)）。
ease-in 规定以慢速开始的过渡效果（等于 cubic-bezier(0.42,0,1,1)）。
ease-out 规定以慢速结束的过渡效果（等于 cubic-bezier(0,0,0.58,1)）。
ease-in-out 规定以慢速开始和结束的过渡效果（等于 cubic-bezier(0.42,0,0.58,1)）。
cubic-bezier(n,n,n,n) 在 cubic-bezier 函数中定义自己的值。可能的值是 0 至 1 之间的数值。
以上五种形式的过度都是基于贝赛尔曲线（5种特殊情况），具体的可以参看http://cubic-bezier.com/#.17,.67,.83,.67
5.transition-delay过渡效果的延迟多长时间才开始。
实例1
ps:在一个元素上面使用transition时，需要指定该hover样式，那么就会按照hover时的值过度；其次，元素的大小边框颜色都是逐渐改变的；当鼠标离开元素时，会触发相反的过渡效果。
复制代码
1 <html>
2 <head>
3 <title></title>
4 <style type="text/css">
5 div{width: 100px;height:100px;background:red;transition:all 2s ease-in-out 20ms; }
6 div:hover{width:200px;height:200px;background:blue; }
7 </style>
8 </head>
9 <body>
10 <div></div>
11 </body>
12 </html>
复制代码
复制代码预览效果。
---------------------------------------------------------------overline----------------------------------------------------------------------
通过 CSS3 转换，我们能够对元素进行移动、缩放、转动、拉长或拉伸。---CSS---transform
转换分为2D和3D---下面是2D转换的介绍
1.translate() 方法，元素从其当前位置移动，根据给定的 left（x 坐标） 和 top（y 坐标） 位置参数
复制代码
1 <html>
2 <head>
3 <title></title>
4 <style type="text/css">
5 div{width: 100px;height: 100px;border: 1px solid #000;background:red;-webkit-transform:translate(40px,60px);}
//需要写浏览器前缀
6 </style>
7 </head>
8 <body>
9 <div></div>
10 </body>
11 </html>
复制代码
2. rotate() 方法，元素顺时针旋转给定的角度。允许负值，元素将逆时针旋转。
复制代码
1 <!DOCTYPE html>
2 <html>
3 <head>
4 <style>
5 div
6 {
7 width:100px;
8 height:75px;
9 background-color:red;
10 border:1px solid black;
11 }
12 div#div2
13 {-webkit-transform:rotate(40deg);}
14 </style>
15 </head>
16 <body>
17 <div>1</div>
18 <div id="div2">2</div>
19 </body>
20 </html>
复制代码
3.scale() 方法，元素的尺寸会增加或减少，根据给定的宽度（X 轴）和高度（Y 轴）参数。
值 scale(1,2) 把宽度转换为原始尺寸的 1 倍，把高度转换为原始高度的 2 倍。
复制代码
1 <!DOCTYPE html>
2 <html>
3 <head>
4 <style>
5 div
6 {
7 width:100px;
8 height:75px;
9 background-color:red;
10 border:1px solid black;
11 }
12 div#div2
13 {margin-top:40px;//如果把margin-top设置为10px;父级div会覆盖子div的一部分
14 -webkit-transform:scale(1,2);//内容也会变形
15 }
16 </style>
17 </head>
18 <body>
19 <div>1</div>
20 <div id="div2">2</div>
21 </body>
22 </html>
|
自学PHP网专注网站建设学习,PHP程序学习,平面设计学习，以及操作系统学习
京ICP备14009008号-1@版权所有www.zixuephp.com
网站声明：本站所有视频，教程都由网友上传，站长收集和分享给大家学习使用，如由牵扯版权问题请联系站长邮箱904561283@qq.com
