移动端第十章过渡

科技2022-08-13 104

过渡

transition:过渡

过渡时间

transition-duration: 3s;

过渡属性(定义宽还是高)

transition-property: all;

过渡函数(运动的方式)

transition-timing-function: ease;

过渡延迟时间

transition-delay: 4s;

实例：

<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> div{ width: 100px; height: 100px; background: red; /*过渡时间*/ transition-duration: 1s; /*运动方式*/ transition-timing-function: ease-in-out; /*延迟时间*/ transition-delay: 2s; /*过渡属性*/ transition-property: width; } div:hover{ width: 1900px; } </style> </head> <body> <div></div> </body> </html>

运动方式(贝塞尔曲线)

ease:开始和结束慢中间快相当于cubic-bezier(0.25, 0.1, 0.25,1) ease-in:(加速) 开始慢相当于cubic-bezier(0.42, 0, 1, 1) ease-in-out：先加速后减速 cubic-bezier(0.42, 0, 0.58, 1) ease-out:(减速) 结束慢cubic-bezier(0.42, 0, 1, 1) linear:匀速相当于cubic-bezier(0, 0, 0.58, 1) -webkit-transition: 2s width; safari浏览器需要加前缀，-webkit- ,其他浏览器不需要添加 transition: 2s width, 4s height, 1s background-color; transition: 2s width, 2s 2s height, 1s 4s background-color; transition: 3s 2s width, 4s 2s height, 8s 4s background-color; 过渡：时间延迟时间样式方式

实例：

<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> div{ width: 100px; height: 100px; background: red; /*transition: 完成的过渡的时间延迟的时间运动的方式属性;*/ -webkit-transition:1s 1s ease-in width,2s 2s ease-in-out height, 3s 3s background-color,4s 4s border; -moz-transition:1s 1s ease-in width,2s 2s ease-in-out height, 3s 3s background-color,4s 4s border; -ms-transition:1s 1s ease-in width,2s 2s ease-in-out height, 3s 3s background-color,4s 4s border; transition:1s 1s ease-in width,/*2s 2s ease-in-out height, 3s 3s background-color,4s 4s border*/; } div:hover{ width: 1900px; height: 800px; background: blue; border: 4px solid yellow; } </style> </head> <body> <div></div> </body> </html>

Processed: 0.008, SQL: 8