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 transform之translate位移
变换
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>
