H5 --- 背景渐变变形过渡

科技2022-07-14 152

背景渐变：

分为2种：线性渐变 linear 径向渐变 radial

案例

<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> div{ width: 800px; height: 200px; margin: 0 auto; /*渐变颜色*/ /*background: linear-gradient(red,blue);*/ /*background: linear-gradient(red,blue,yellow,pink);*/ /*background: linear-gradient(rgb(255,0,0),rgb(0,255,0));*/ /*分配颜色比*/ /*background: linear-gradient(red 60%,blue);*/ /*background: linear-gradient(red 40%,blue 30%, pink);*/ /*渐变的方向*/ /*background: -webkit-linear-gradient(left ,red,blue);*/ /*background: -webkit-linear-gradient(right ,red,blue);*/ /*渐变的兼容*/ /*浏览器前缀不分上下，但是linear-gradient这个写法必须在最后*/ /*IE9以上有效果*/ /*background: -webkit-linear-gradient(right ,red,blue); background: -moz-linear-gradient(right ,red,blue); background: -ms-linear-gradient(right ,red,blue); background: -o-linear-gradient(right ,red,blue); background: linear-gradient(right ,red,blue);*/ /*渐变的另一种写法*/ /*background: -webkit-gradient(linear,0 0, 0 100%, from(yellow), to(red));*/ background: -webkit-gradient(linear,0 100%, 100% 100%, from(yellow), to(red)); } </style> </head> <body> <div></div> </body> </html>

变形

transform:变换/变形 translate:移动 translate(X px,Y px);

<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> div{ width: 200px; height: 200px; background: red; margin: 100px auto; /*过渡属性*/ transition: 1s; } div:hover{ /*transform:translateX(300px)*/ /*transform:translateY(300px)*/ /*transform:translate(300px,300px)*/ transform:translate(-300px,300px) } </style> </head> <body> <div></div> </body> </html>

rotate:旋转/负值就是倒转; rotate(-360deg);

<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> div{ width: 200px; height: 200px; background: red; margin: 100px auto; /*过渡属性*/ transition: 1s; } div:hover{ /*transform: rotateX(360deg);*/ /*transform: rotateY(360deg);*/ /*transform: rotate(360deg);*/ transform: rotate(-360deg); /*正数是顺时针旋转，负数是逆时针旋转*/ } </style> </head> <body> <div>1</div> </body> </html>

scale:缩放 scale(x,y) skew:扭曲 skew(x deg,y deg)

<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> div{ width: 200px; height: 200px; background: red; margin: 100px auto; /*过渡属性*/ transition: 1s; } div:hover{ /*transform: scaleX(2);*/ /*transform: scaleY(2);*/ /*transform: scaleY(.5);*/ /*transform: scale(.5);*/ /*transform: scale(0);*/ transform: scale(-2); } </style> </head> <body> <div>1</div> </body> </html>

扭曲

<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> div{ width: 200px; height: 200px; background: red; margin: 100px auto; /*过渡属性*/ transition: 1s; } div:hover{ /*transform: skewX(-80deg);*/ /*transform: skewY(50deg);*/ /*transform: skew(50deg,20deg);*/ } </style> </head> <body> <div>1</div> </body> </html>

综合写法

<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> div{ width: 200px; height: 200px; background: red; margin: 100px auto; /*过渡属性*/ transition: 1s; } div:hover{ transform: translate(300px,300px) rotate(360deg) scale(1.5) skew(40deg); } </style> </head> <body> <div>1</div> </body> </html>

过渡 transition

过渡时间 transition-duration: 3s; 过渡属性(定义宽还是高) transition-property: all; 过渡函数(运动的方式) transition-timing-function: ease; 过渡延迟时间 transition-delay: 4s; 运动方式(贝塞尔曲线) 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-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> <!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.027, SQL: 8