一、2D转换之移动
1.transform 属性向元素应用 2D 或 3D 转换。该属性允许我们对元素进行旋转、缩放、移动或倾斜。
2. translate(x,y) //定义2D转换
3.示例:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Special Effect</title> <style> div{ width: 200px; height: 200px; background-color: #5f5f5f; position: absolute; /*绝对定位*/ left:50%; /*距左50%*/ top:50%; /*距上50%*/ transform:translate(-50%,-50%); /*以当前的div的左上角为原点,向左移动50%,再向上移动50%*/ } </style> </head> <body> <div></div> </body> </html>
运行效果:(要让盒子显示在正中央)
添加transform之前
添加transform之后
二、2D转换之旋转
4.示例代码:
Style样式
div{ width: 200px; height: 200px; background-color: #5f5f5f; margin: 100px auto; transform-origin: left top; /*以左上角的点为旋转中心点进行旋转*/ } div:hover{ transform: rotate(45deg); /*当鼠标移上去的时候旋转45度*/ }
运行效果:(鼠标移上去之前)
鼠标移上去之后:
三、2D转换之缩放
5.style样式代码示例:
div{ width: 200px; height: 200px; background-color: #5f5f5f; margin: 100px auto; } div:hover{ /*transform:scale(0.5); !*在X轴和Y轴方向上均缩放0.5倍*!*/ /*transform:scaleX(2); !*在X轴方向上缩放2倍*!*/ /*transform: scaleY(1.5); !*在Y轴方向上缩放1.5倍*!*/ transform: scale(2,0.5); /*X轴方向上缩放2倍,Y轴方向上缩放0.5倍*/ }
运行效果:
鼠标移动之前:
鼠标移动上去之后:
四、2D转换之斜切
样式代码示例:
div{ width: 200px; height: 200px; background-color: #5f5f5f; margin: 100px auto; } div:hover{ /*transform: skewX(10deg); !*X轴方向上斜切10度*!*/ transform: skewY(15deg); /*Y轴方向上斜切15度*/ }运行效果:
6.X轴上斜切
Y轴斜切
7.小案例:
div{ width: 350px; height: 50px; border:#5f5f5f solid 1px; margin:100px auto; position: relative; /*父级相对,子级绝对,只要就会以子级为原点定位*/ } div:after{ content:''; /*content即使没有内容是空的,也是要写的*/ width: 20px; height: 20px; display: block; /*因为是行内元素,只有让它以块(block)的形式显示,宽高才会起作用*/ border-bottom: #5f5f5f solid 2px; /*下边框*/ border-right: #5f5f5f solid 2px; /*右边框*/ position: absolute; top:50%; /*距离上面50%*/ right:15px; /*距离右边15像素*/ transform:translateY(-50%) rotate(45deg); /*向上移动50%,旋转45度*/ } div:hover{ border: #9361ff solid 1px; /*当鼠标移上去的时候,颜色变为#9361ff*/ } /* *当鼠标移上去后,三角的颜色也要变化 */ div:hover:after{ /*注意是div:hover:after而不是div:after:hover*/ border-bottom: #9361ff solid 2px; border-right: #9361ff solid 2px; }
<body> <div></div> </body>鼠标移动上去以前:
鼠标移上去以后边框颜色和三角颜色都会发生变化。
8.transition
9. 图片是行显示的,如果想让margin起作用,要让它块显示:display:block;
10.transition 过度示例代码:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>transition</title> <style>运行效果:div{ width: 300px; height: 300px; background: #fdff1f; border: #ffae28 solid 3px; margin: 100px auto; transition: all 0.5s; } div:hover{ width: 500px; height: 400px; border-radius: 15px; background: #ff67c2; }</style></head><body> <div></div></body></html>
鼠标移上去之前
鼠标移上去之后
11.360度旋转案例:
img{ width: 320px; height: 350px; display: block; margin: 40px auto; border-radius: 50%; border: #2e51ff solid 2px; transition: all 5s; /*all来表示所有的属性都变化*/ } img:hover{ transform: rotate(360deg); }
<img src="dousen.jpg">
运行效果:
鼠标移动上去之前
鼠标移动上去之后(旋转的过程中截图)
12.旋转过渡案例2:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>2D旋转</title> <style type="text/css"> img{ transition: transform 1s ease-in 0s; /*ease-in表示运动方式*/ } img:hover{ transform: rotate(90deg); } </style> </head> <body> <img src="images/wukong.jpeg" alt="孙悟空"> </body> </html>运行效果:
鼠标移动上去之前
鼠标移上去之后:
13.一般小的图标用小盒子,如:i,em,span等来做。
background-position:用它来解决背景图片定位的问题(精灵图片)
背景定位的一个小案例:
(图片截自传智公开课视频)
14.能用CSS做的,就不用JS,因为JS的执行效率相对太低。