<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
*{margin: 0;padding: 0;}
.box{
width: 500px;
height: 400px;
background: #f00;
margin: 100px;
}
.box1{
width: 200px;
height: 100px;
background: skyblue;
transition:1s;/*过去*/
}
.box:hover .box1{
transform:translate(100px,50px);/*位移*/
transform:translate(100px);
/*单一方向的位移*/
transform:translateX(10px);/*水平位移*/
transform:translateY(100px);/*垂直位移*/
}
</style>
</head>
<body>
<!--
位移:
transform:translate(水平位移,垂直位移);
transform:translate(水平位移);
transform:translateX(水平位移);
transform:translateY(垂直位移);
默认情况: 正值 从上往下,从左往右
-->
<div class="box">
<div class="box1"></div>
</div>
</body>
</html>
分割分割分割
位移案列
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
*{margin: 0;padding: 0;}
.box{
width: 500px;
height: 400px;
background: pink;
}
.txt1{
background: red;
color:#fff;
font-size:20px;
font-weight:bold;
transform:translateY(20px);/*位移*/
transition:1s;/*过渡*/
}
.txt2{
background:skyblue;
color:#fff;
font-weight:bold;
transform:translateY(300px);/*位移*/
transition:1s;/*过渡*/
}
.box:hover .txt1{
transform:translateY(60px);/*位移*/
}
.box:hover .txt2{
transform:translateY(200px);/*位移*/
}
</style>
</head>
<body>
<div class="box">
<p class="txt1">位移案列</p>
<p class="txt2">位移案列</p>
</div>
</body>
</html>
