<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<style>
div{
width: 200px;
height: 100px;
margin: 10px auto;
text-align: center;
line-height: 100px;
font-size: 30px;
position: relative;
transition: color 1s;
/* z-index: 1; */
}
div:hover{
color: yellow;
}
/* 伪元素的相同属性 */
div::after{
z-index: -1;
width: 200px;
height: 100px;
background-color: pink;
content: "";
position: absolute;
top: 0px;
left: 0px;
}
/* 第一个div */
.one:hover::after{
transform:scale(1,1) ;
transform-origin: left;
}
.one::after{
transition: transform 1s;
transform: scale(0,1);
transform-origin:right;
}
/* 第二个div */
.two:hover::after{
transform: scale(1);
transform-origin: left top;
}
.two::after{
transition: transform 1s;
transform:scale(0);
transform-origin: right bottom;
}
/* 第三个div */
.three:hover::after{
transform: scale(1);
transform-origin: top center;
}
.three::after{
transition:transform 1s ;
transform: scale(0);
transform-origin: bottom center;
}
</style>
<body>
<div class="one">Hove</div>
<div class="two">Hove</div>
<div class="three">Hove</div>
</body>
</html>