css 2D 转换
2020年6月14日转换(transform)是css3中具有颠覆性的特征之一,可以实现元素的位移,旋转,缩放等效果
- translate:移动
- rotate:旋转
- scale:缩放
特性重点(translate)
- 定义2D转换中的移动,沿着X和Y轴移动元素
- translate最大的优点:不会影响到其他元素的位置
- translate中的百分比单位,是相对于自身元素的widht 和height做百分比, 如widht 为100px translateX为50% X轴移动距离为50px height为200px translateY为50%Y轴移动距离为100px
- 对行内标签没有效果
1 2 3 4 |
transform: translateX(100px); /*X轴移动分写*/ transform: translateY(100px); /*Y轴移动分写*/ transform: translate(100px ,100px); /*移动简写*/ transform: translateX(100px) translateY(100px); /*移动合并写*/ |
特性重点 (rotate)
- rotate里面写度数,单位是deg
- 角度为正,顺时针,角度为负,逆时针
- 默认旋转中心是元素的中心点
1 |
transform: rotate(45deg); /*旋转*/ |
特性重点(transform-origin)
- 注意后面的参数 x 和 y是空格隔开
- xy默认转换中心点是元素的中心点(50% 50%)
- 还可以给xy设置为px 或者方位名词 (top bottom left right center)
1 2 |
transform-origin: 50% 50%; transform-origin: center center; |
特性重点(scale)
- 单一数值单一的数值即指定了一个缩放系数,同时作用于X轴和Y轴让该元素进行缩放,相当于指定了单个值的scale()(2D缩放)函数。
- 两个长度/百分比值两个数值即分别指定了2D比例的X轴和Y轴的缩放系数,相当于指定了两个值的scale()(2D缩放)函数。
- 三个长度/百分比值三个数值即分别指定了3D比例的X轴、Y轴和Z轴的缩放系数. 相当于一个scale3d()函数。
1 |
transform: scale(1.2); |
2D转换综合写法
- 同时使用多个转换,其格式为 transform: translate() rotate() scale();
- 其顺序会影响转换的效果.(先旋转会改变坐标的方向)
- 当我们同时有位移和其他属性的时候,记得要将位移放到最前面
动画
特性
- 0%是动画的开始,100%是动画的完成.这样的规定就是动画序列
- 在@keyframes中规定某项css样式,就能创建由当前样式逐渐改为新样式的动画效果
- 动画是使元素从一种样式逐渐变化为另一种样式的效果,您可以改变任意多的样式任意多的次数
- 请使用百分比来规定变化发生的时间,或者用关键词 from 和 to ,等同于 0% 和 100%
动画的基本使用
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
div { /*调用动画这里写自定义的动画名称*/ animation: 动画名; /*设置这个动画持续时间*/ animation-duration: 持续时间; } /*自定义一个动画*/ @keyframes 动画名 { 0% { /*转换代码*/ } 100% { /*转换代码*/ } } |
动画常用属性
简写
1 |
animation: 动画名称 持续时间 运动曲线 何时开始 播放次数 下次是否反向 动画结束状态; |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 |
/*所有动画的简写属性 , 除了 animation-play-state 播放状态*/ animation: run-div; /*调用 @keyframes 定义的动画 (必选) */ animation-name:run-div ; /*规定了一个动画完成花费多少秒或毫秒 (必选)*/ animation-duration: 3s; /*规定了动画速度曲线默认是ease*/ animation-timing-function: ease; /*规定动画从什么时候开始 默认0秒开始*/ animation-delay: 1s; /*规定动画播放次数 默认 1 次 infinite(无限循环)*/ animation-iteration-count: 1; /*是否在下一周期逆向播放,默认 normal alternate(逆向播放)*/ animation-direction: alternate; /*规定动画结束后状态,默认 backwards(返回原来位置) forwards(保留在当前位置) */ animation-fill-mode: forwards; /*定义动画播放状态默认 running(运行) paused(暂停)*/ animation-play-state: paused; |
速度曲线属性细节
1 2 3 4 5 |
animation-timing-function: linear; /*匀速*/ animation-timing-function: ease; /*默认*/ animation-timing-function: ease-out; /*低速结束*/ animation-timing-function: ease-in-out; /*低速开始低速结束*/ animation-timing-function: steps(5); /*分步*/ |
案例1利用translate让div居中
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 |
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <style> .box{ position: relative; width: 500px; height: 500px; background: red; } .box div{ position:absolute; width: 150px; height: 150px; background: blue; top: 50%; left: 50%; transform: translate(-50%, -50%); } </style> </head> <body> <div class="box"> <div></div> </div> </body> </html> |
案例2,表单下拉小三角形
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 |
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> div{ position: relative; border:1px solid #000000; width: 250px; height: 30px; } div:hover::after{ transition: all 0.15s; transform: rotate(225deg); } div::after{ content: ""; display: block; width: 10px; height: 10px; position: absolute; top: 9px; right: 14px; border-right: 1px solid #000000; border-bottom: 1px solid #000000; transform: rotate(45deg); } </style> </head> <body> <div></div> </body> </html> |
案例三鼠标悬停图片放大
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 |
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <style> div{ width: 300px; height: auto; overflow: hidden; border: solid 1px red; } div img{ width: 100%; } div img:hover{ transition: all 2s; transform: scale(1.3); } </style> </head> <body> <div> <img src="http://t9.baidu.com/it/u=1761131378,1355750940&fm=79&app=86&f=JPEG?w=667&h=1000" alt=""> </div> </body> </html> |
案例4分页小案例
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 |
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <style> ul li { width: 50px; height: 50px; text-align: center; line-height: 50px; list-style: none; margin: 10px; float: left; border: solid 1px pink; border-radius: 50%; cursor: pointer; } ul li:hover { transition: all .2s; transform: scale(1.3); } </style> </head> <body> <ul> <li>1</li> <li>2</li> <li>3</li> <li>4</li> <li>5</li> <li>6</li> <li>7</li> </ul> </body> </html> |
案例5动画奔跑吧div
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 |
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> div { width: 100px; height: 100px; background: pink; animation: run-div; animation-duration: 3s; } @keyframes run-div { 0% { } 25% { transform: translate(1000px, 0px); } 50% { transform: translate(1000px, 500px); } 75% { transform: translate(0px, 500px); } 100% { transform: translate(0px, 0px); } } </style> </head> <body> <div></div> </body> </html> |
案例热力图波纹小动画
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 |
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <style> body{ position: relative; background: url('https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1592241214059&di=c69a86431ce60b76c09f92b7ffac6c8d&imgtype=0&src=http%3A%2F%2F211.159.149.56%3A8080%2Fmap%2F16%2F4o28b0625501ad13015501ad2bfc0093.jpg') no-repeat top center; background-size: 1480px; } .city{ position: absolute; top:200px; left: 500px; } .city div{ border-radius: 50%; } .city .circle{ width: 8px; height: 8px; background: blue; } .city div[class^=ripple]{ position: absolute; top:50%; left: 50%; transform: translate(-50% , -50%); width: 16px; height: 16px; box-shadow: 0 0 3px blue; animation: ripple 1s linear infinite; } body .city .ripple2 { animation-delay: 0.33s; } body .city .ripple3 { animation-delay: 0.66s; } @keyframes ripple { 25%{ width: 32px; height: 32px; } 100%{ width: 74px; height: 74px; } } </style> </head> <body> <div class="city"> <div class="circle"></div> <div class="ripple1"></div> <div class="ripple2"></div> <div class="ripple3"></div> </div> </body> </html> |
打字机效果
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 |
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <style> div{ font-size: 20px; overflow: hidden; word-break: keep-all; /*文本不换行*/ animation: w 5s steps(11); } @keyframes w { 0%{ width: 0px; } 100%{ width: 220px; } } </style> <body> <div> 我在学前端我在前端等你 </div> </body> </html> |
案例奔跑的大熊
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 |
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <style> body { position: relative; } div { width: 200px; height: 100px; background: url('https://www.zfajax.com/wp-content/uploads/2020/06/bear.png') no-repeat; position: absolute; animation: move 0.8s steps(8) infinite, run 2s linear forwards; } @keyframes move { 0% { background-position: 0px; } 100% { background-position: -1600px; } } @keyframes run { 0% { left: 0%; } 100% { left: 50%; transform: translate(-50%); } } </style> </head> <body> <div> </div> </body> </html> |