过渡属性用法: transition :ransition-property transition-duration transition-timing-function transition-delay
可以一起指定也可以分别单独指定
<!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="x-ua-compatible" content="ie=edge"> <title>document</title> <style> div { width: 100px; height: 200px; background-color: aqua; transition: width 2s ease-in-out 0.5s; } div:hover { width: 500px; } </style> </head> <body> <div></div> </body> </html>
结果如下,当鼠标上上去后变化不再是瞬间完成,而是过渡完成。
移动可以指定像素值也可以指定百分比,注意:指定百分比是自身大小的百分比,因此可以用于设置盒子定位时的居中对齐(在设置left:50%后再移动自身的-50%即可)。
<!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=, initial-scale=1.0"> <meta http-equiv="x-ua-compatible" content="ie=edge"> <title>document</title> <style> div { width: 100px; height: 100px; background-color: aqua; transition: all 2s; } div:active { transform: translate(200px, 200px); } </style> </head> <body> <div></div> </body> </html>
点击之后盒子进行了移动。用于让定位的盒子居中的代码入下
<!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="x-ua-compatible" content="ie=edge"> <title>document</title> <style> .fa { width: 300px; height: 300px; background-color: aqua; transition: all 0.5s; position: relative; } .son { background-color: red; position: absolute; left: 50%; top: 50%; width: 100px; height: 100px; transform: translate(-50%, -50%); } </style> </head> <body> <div class="fa"> <div class="son"></div> </div> </body> </html>
结果为
x,y设置大于1 是放大,小于1 是缩小。
<!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="x-ua-compatible" content="ie=edge"> <title>document</title> <style> div { width: 100px; height: 100px; background-color: aqua; margin: 200px auto; transition: all 2s; } div:hover { transform: scale(0.5, 2); } </style> </head> <body> <div> </div> </body> </html>
<!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="x-ua-compatible" content="ie=edge"> <title>document</title> <style> div { width: 200px; height: 100px; background-color: aqua; margin: 200px auto; transition: all 2s; transform-origin: bottom left; } div:hover { transform: rotate(120deg); } </style> </head> <body> <div></div> </body> </html>
x,y分别指定倾斜在x,y方向上的角度,可以为负数。y值不写默认为0。
<!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="x-ua-compatible" content="ie=edge"> <title>document</title> <style> div { width: 100px; height: 100px; background-color: aqua; border: 1px solid red; transition: all 1s; margin: 200px auto; } div:hover { transform: skew(30deg, 20deg); } </style> </head> <body> <div></div> </body> </html>
3d旋转与2d类似,只不过一个是基于二位坐标一个是基于三维坐标。三个值可以同时指定也可以单独指定。
<!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="x-ua-compatible" content="ie=edge"> <title>document</title> <style> div { width: 200px; height: 100px; background-color: aqua; margin: 200px auto; transition: all 2s; transform-origin: bottom left; } div:hover { transform: rotatex(120deg); /* transform: rotatey(120deg); */ /* transform: rotatez(120deg); */ } </style> </head> <body> <div></div> </body> </html>
3d移动对于xy方向上的移动与2d移动一致。只有z方向上的移动不一样。z方向上的移动在现实生活中是距离变远,距离变近。因此在网页中显示结果是变近则变大,变远则变小。
要使z方向上移动生效首先要设置perspective(眼睛距离屏幕的距离);
<!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="x-ua-compatible" content="ie=edge"> <title>document</title> <style> body { perspective: 1000px; /* 数值越小说明眼睛离的越近 */ } div { width: 200px; height: 200px; background-color: aqua; transition: all 0.5s; margin: 200px auto; } div:hover { transform: translate3d(0, 0, 200px); } </style> </head> <body> <div> </div> </body> </html>
@keyframes 动画名称 { from{ 开始} 0% to{ 结束 } 100% }
可以用 from...to 来指定动画过程,也可以用0%~100%指定动画过程。
<!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="x-ua-compatible" content="ie=edge"> <title>document</title> <style> div { width: 100px; height: 100px; background-color: aqua; /* animation: 动画名称 动画时间 运动曲线 何时开始 播放次数 是否反方向 */ animation: move 5s linear 3; } @keyframes move { 0% { transform: translate3d(0, 0, 0); } 25% { transform: translate3d(400px, 0, 0); } 50% { transform: translate3d(400px, 300px, 0); } 75% { transform: translate3d(0, 300px, 0); } 100% { transform: translate3d(0, 0, 0); } } </style> </head> <body> <div></div> </body> </html>
如对本文有疑问, 点击进行留言回复!!
清除新版Google Chrome浏览器中表单控件(input,button...)默认的黑色边框
荐 20200714——git/mac配置/项目运行步骤/一些报错
antd 菜单组件 使用时报错:Cannot read property ‘isRootMenu‘ of undefined
CSS|div的style=“background-image: url(img/a.bmp)图片显示不出来
硬件仪表盘账号建立指导(一) --WHQL认证测试结果提交账号(一)
cookie的规范Cookie的不可跨域名性或Cookie与域名的关系
网友评论