CSS3 transition/transform

当前位置 : 首页 > 网页制作 > CSS > CSS3 transition/transform

CSS3 transition/transform

来源: 作者: 时间:2016-01-25 10:02
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 </>
复制代码
 
 
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>
Tag:
网友评论

<