学习目标
本期继续学习CSS高级技巧
1.京东过渡效果
在京东网页会有图片的一个过渡效果，我们利用之前学习的知识来实现它：
html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
div{
width: 183px;
height: 130px;
border: 1px solid red;
overflow: hidden;
}
div img{
width: 193px;
height: 130px;
transition: all 0.5s;
}
div:hover img{
margin-left: -10px;
}
</style>
</head>
<body>
<div>
<img src="1.jpg"/>
</div>
</body>
</html>
效果图：
过度前：
过度后：
2.京东侧边栏
index
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
*{
margin: 0;
padding: 0;
}
li{
list-style: none;
}
.subnav{
margin: 100px auto;
width: 20px;
}
.subnav li{
width: 20px;
height: 20px;
margin: 3px 0;
background-color: pink;
position: relative;
}
.subnav div{
position: absolute;
right: 0;
top: 0;
height: 20px;
width: 0px;
background-color: purple;
transition: all 0.6s;
z-index: -1;/*不要盖住父盒子*/
}
.subnav li:hover div{
width: 100px;
}
</style>
</head>
<body>
<div class="subnav">
<ul>
<li>
<div></div>
</li>
<li><div></div></li>
<li><div></div></li>
<li><div></div></li>
<li><div></div></li>
</ul>
</div>
</body>
</html>
前：
后：
3. 2d-移动
2D变形(CSS3) transform
transform是CSS3中具有颠覆性的特征之一，可以实现元素的位移、旋转、倾斜、缩放，甚至支持矩阵方式，配合过渡和即将学习的动画知识，可以取代大量之前只能靠Flash才可以实现的效果。
变形转换 transform transform 变换 变形的意思 《 transformers 变形金刚》
移动 translate(x, y)
translate 移动平移的意思
translate(50px,50px);
使用translate方法来将文字或图像在水平方向和垂直方向上分别垂直移动50像素。
可以改变元素的位置，x、y可为负值；
translate(x,y)水平方向和垂直方向同时移动（也就是X轴和Y轴同时移动）
translateX(x)仅水平方向移动（X轴移动）
translateY(Y)仅垂直方向移动（Y轴移动）
例子：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
div{
width: 200px;
height: 200px;
background-color: pink;
/*transform: translate(100px,0);*/
/*transform: translate(100px,100px);*/
transition: all 0.7s;
}
div:hover{
transform: translate(100px,100px);
}
</style>
</head>
<body>
<div></div>
</body>
</html>
前：
后：
.box {
width: 499.9999px;
height: 400px;
background: pink;
position: absolute;
left:50%;
top:50%;
transform:translate(-50%,-50%); /* 走的自己的一半 */
}
让定位的盒子水平居中
例子：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
div{
width: 200px;
height: 200px;
background-color: pink;
top:50%;
left: 50%;
position: absolute;
transform: translate(-50%,-50%);
/*transform如果x-50%跟父亲没关系,是走自己盒子宽度的一半*/
}
/*div:hover{
transform: translate(100px,100px);
}*/
</style>
</head>
<body>
<div></div>
</body>
</html>
效果图：
以后遇到要居中可以使用这个方法，而不用计算盒子宽度的一半了。
缩放 scale(x, y)
transform:scale(0.8,1);
可以对元素进行水平和垂直方向的缩放。该语句使用scale方法使该元素在水平方向上缩小了20%，垂直方向上不缩放。
例子：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
div{
width: 200px;
height: 200px;
background-color: pink;
top:50%;
left: 50%;
position: absolute;
transform: translate(-50%,-50%);
/*transform如果x-50%跟父亲没关系,是走自己盒子宽度的一半*/
}
/*div:hover{
transform: translate(100px,100px);
}*/
</style>
</head>
<body>
<div></div>
</body>
</html>
前：
后：
scale(X,Y)使元素水平方向和垂直方向同时缩放（也就是X轴和Y轴同时缩放）
scaleX(x)元素仅水平方向缩放（X轴缩放）
scaleY(y)元素仅垂直方向缩放（Y轴缩放）
scale()的取值默认的值为1，当值设置为0.01到0.99之间的任何值，作用使一个元素缩小；而任何大于或等于1.01的值，作用是让元素放大 1.
如果scale（0.8），则表示x和y都缩放为原来的0.8倍。
图片放大例子：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
div{
width: 386px;
height: 260px;
overflow: hidden;
}
div:hover img{
transform: scale(1.5);
}
</style>
</head>
<body>
<div>
<img src="1.jpg"/>
</div>
</body>
</html>
前：
后：
旋转 rotate(deg)
可以对元素进行旋转，正值为顺时针，负值为逆时针；
transform:rotate(45deg);
注意单位是 deg 度数
例子：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
div{
width: 200px;
height: 200px;
background-color: pink;
margin: 100px auto;
transition: all 0.7s;
}
div:hover{
transform: rotate(45deg);/*顺时针旋转45度*/
}
</style>
</head>
<body>
<div></div>
</body>
</html>
前：
后;
transform-origin可以调整元素转换变形的原点
div{transform-origin: left top;transform: rotate(45deg); } /* 改变元素原点到左上角，然后进行顺时旋转45度 */
如果是4个角，可以用 left top这些，如果想要精确的位置， 可以用 px 像素。
div{transform-origin: 10px 10px;transform: rotate(45deg); } /* 改变元素原点到x 为10 y 为10，然后进行顺时旋转45度 */
例子：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
div{
width: 200px;
height: 200px;
background-color: pink;
margin: 100px auto;
transition: all 0.7s;
transform-origin: right bottom;/*设置旋转中心点为右下角*/
}
div:hover{
transform: rotate(45deg);/*顺时针旋转45度*/
}
</style>
</head>
<body>
<div></div>
</body>
</html>
前：
后：
案例旋转楚乔传
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
div{
width: 250px;
height: 170px;
border: 1px solid red;
margin: 150px auto;
position: relative;
}
div img{
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
transition: all 0.7s;
transform-origin: top right;
}
div:hover img:first-child{/* 鼠标经过div 第一张图片旋转 */
transform: rotate(60deg);
}
div:hover img:nth-child(2){
transform: rotate(120deg);
}
div:hover img:nth-child(3){
transform: rotate(180deg);
}
div:hover img:nth-child(4){
transform: rotate(240deg);
}
div:hover img:nth-child(5){
transform: rotate(300deg);
}
div:hover img:nth-child(6){
transform: rotate(360deg);
}
</style>
</head>
<body>
<div>
<img src="img/2.jpg" />
<img src="img/3.jpg" />
<img src="img/4.jpg" />
<img src="img/5.jpg" />
<img src="img/6.jpg" />
<img src="img/1.jpg" />
</div>
</body>
</html>
效果：
倾斜 skew(deg, deg)
transform:skew(30deg,0deg);
该实例通过skew方法把元素水平方向上倾斜30度，处置方向保持不变。
可以使元素按一定的角度进行倾斜，可为负值，第二个参数不写默认为0。
4.鼠标经过显示阴影
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
div{
width: 100px;
height: 100px;
background-color: pink;
transition: all 2s;
}
div:hover{
background-color: yellow;
}
</style>
</head>
<body>
<div></div>
</body>
</html>
这个自己看看效果。
阴影：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
div{
width: 150px;
height: 300px;
border: 1px solid #ccc;
transition: all 0.7s;
}
div:hover{
box-shadow: 0 10px 20px rgba(0,0,0,0.5);
}
</style>
</head>
<body>
<div></div>
</body>
</html>
5.总结
本期学习到此结束。
来源：CSDN
作者：灬银瓶丶
链接：https://blog.csdn.net/zhangbobo1997/article/details/103546605