css之过渡、变换

一.过渡

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>过渡</title>
 6     <style type="text/css">
 7     body{
 8         height: 500px;
 9         border: 1px solid red;
10         position: relative;
11     }
12     div{
13         width: 100px;
14         height: 100px;
15         background: red;
16         position: absolute;
17         left: 0;  top: 0;
18         transition: 5s all cubic-bezier(0.570, -0.440, 0.520, 1.430);
19     }
20     body:hover div{
21         left: 800px;
22     }
23     </style>
24 </head>
25 <body>
26     <!-- 
27         过渡,就是从一个值到另一个值之间的过程,就是过渡
28 
29            transition
30                比如:
31                    transition: 1s 1s all ease; 后三个值可以省略
32 
33                    第一个值:过渡的总时间 单位是s或ms
34 
35                    第二个值:延迟过渡的时间 单位是s或ms
36 
37                    第三个值:需要过渡的样式
38 
39                    第四个值:过渡的方式
40                       linear  匀速
41                       ease 慢速开始,然后慢慢变快
42                       ease-in 慢速开始
43                       ease-out 慢速结束
44                       ease-in-out 开始和结束都满
45                       cubic-bezier(1,0,1,0) 贝瑟尔曲线
46                       贝瑟尔曲线工具:
47                        http://xuanfengge.com/easeing/ceaser/
48      -->
49     <div></div>
50 </body>
51 </html>

二.变换

2.1 transformtranslate位移

变换
transform
位移
属性translateX()x轴的位置,正值往右,负值往左
属性translateY()y轴的位置,正值往下,负值往上
translate(x轴的位移量,y轴的位移量)

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>变换</title>
 6     <style type="text/css">
 7     body{
 8         height: 500px;
 9         border: 
10         1px solid red;
11     }
12       div{
13           width: 100px;
14           height: 100px;
15           background: red;
16           transition: 1s;
17       }
18       body:hover div{
19           transform:translate(100px,200px);
20       }
21     </style>
22 </head>
23 <body>
24     <div></div>
25 </body>
26 </html>

2.2 transform之变换rotate

 

旋转
rotate() 接收的是一个度数deg,正值顺时针,负值逆时针

 

 

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>变换</title>
 6     <style type="text/css">
 7     body{
 8         height: 500px;
 9         border: 
10         1px solid red;
11     }
12       div{
13           width: 100px;
14           height: 100px;
15           background: red;
16           margin: 100px auto;
17           transition: 1s;
18       }
19       body:hover div{
20           transform:rotate(45deg);
21       }
22     </style>
23 </head>
24 <body>
25     <div></div>
26 </body>
27 </html>

 

2.3 transform之缩放scale
     
缩放

属性scale()接收的是数值,可以使浮点数 当大于1--放大效果;小于1 是缩小效果

 

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>变换</title>
 6     <style type="text/css">
 7     body{
 8         height: 500px;
 9         border: 
10         1px solid red;
11     }
12       div{
13           width: 100px;
14           height: 100px;
15           background: red;
16           margin: 100px auto;
17           transition: 1s;
18       }
19       body:hover div{
20           transform:scale(2);
21       }
22     </style>
23 </head>
24 <body>    
25     <div></div>
26 </body>
27 </html>

 

2.4 transform之斜切skew

 

斜切
接收的是旋转角度
属性skewX()x轴的斜切角度
属性skewY()
y轴的斜切角度
skew(30deg,30deg)

 

 

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>变换</title>
 6     <style type="text/css">
 7     body{
 8         height: 500px;
 9         border: 
10         1px solid red;
11     }
12       div{
13           width: 100px;
14           height: 100px;
15           background: red;
16           margin: 100px auto;
17           transition: 1s;
18       }
19       body:hover div{
20           transform: skew(40deg,45deg);
21       }
22     </style>
23 </head>
24 <body>
25     <div></div>
26 </body>
27 </html>

 

2.5 变换原点及解析位置

原点默认是center中心,解析按照代码顺序解析

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>变换原点及解析顺序</title>
 6     <style type="text/css">
 7     body{
 8         width: 800px;
 9         height: 600px;
10         border: 1px solid purple;
11     }
12     div{
13         width: 100px;
14         height: 100px;
15         background: red;
16         margin-top: 130px;
17         transition: 1s;
18         transform-origin: left top;/*从左上为原点变换 */
19     }
20     body:hover #box1{
21         transform: scale(2) translate(200px,0);
22         /*解析顺序:先扩大两倍,再向x正半轴位移200px*/
23     }
24     body:hover #box2{
25         transform:translate(200px,0) scale(2);
26         /*解析顺序:先向x正半轴位移200px,再扩大两倍*/
27     }
28     </style>
29 </head>
30 <body>
31     <div id="box1"></div>
32     <div id="box2"></div>
33     <!-- 
34         变换原点
35               transform-origin:
36                 left top
37                 right bottom
38                 center
39                 默认是center 当设置相应的值后,会按照相应的设置的值发生变换
40 
41      -->
42 </body>
43 </html>

 

posted @ 2019-01-02 12:10  静心*尽力  阅读(306)  评论(0编辑  收藏  举报