<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.da{width: 400px;height: 400px;margin: 800px auto;background: url(./src=http___pic1.win4000.com_wallpaper_a_53b4ca6e3b504.jpg_down&refer=http___pic1.win4000.jfif);position: relative;overflow: hidden;}
.zuo{width: 800px;height: 800px;background: purple;opacity: 0.5;transition: 1s;
transform: translate(-700px,-700px)rotate(45deg);position: absolute;
}
.you{width: 800px;height: 800px;background: purple;opacity: 0.5;transition: 1s;
transform: translate(300px,300px)rotate(45deg);position: absolute;
}
.zhong{width: 400px;height: 290px;background: grey;opacity: 0.9;position: absolute;top: 50%;margin-top: -145px;transform: rotate(45deg);transition: 1s;opacity: 0;}
.heng{width: 400px;height: 3px;background: blue;margin-top: 60px;}
p{color: white;text-align: center;}
.da:hover .zuo {transform: translate(-400px,-400px)rotate(45deg);}
.da:hover .you {transform: translate(-10px,-10px)rotate(45deg);}
.da:hover .zhong{transform: rotate(0);opacity: 0.9;animation: x 1s;}
@keyframes x{
0%{height: 2px;}
100%{height: 290px;}
}
</style>
</head>
<body>
<div class="da">
<div class="zuo"></div>
<div class="you"></div>
<div class="zhong">
<p>测试文字</p>
<div class="heng"></div>
<p>测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字</p>
</div>
</div>
</body>
</html>这段代码中间灰色区域在鼠标划入的时候由一条线慢慢变成整个灰色区域，那么有2个问题：
1、怎样编写代码才能实现鼠标划出的时候从整个灰色区域变成一条线？
2、在鼠标刚开始划入的时候灰色区域是一条线，但是此时灰色区域div里面的“测试文字”和那条蓝色的横线怎样编写代码才能在刚开始的时候不要出现，而是随着灰色区域的逐渐增大而逐渐出现？
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.da{width: 400px;height: 400px;margin: 800px auto;background: url(./12.png);position: relative;overflow: hidden;}
.zuo{width: 800px;height: 800px;background: purple;opacity: 0.5;transition: 1s;
transform: translate(-700px,-700px)rotate(45deg);position: absolute;
}
.you{width: 800px;height: 800px;background: purple;opacity: 0.5;transition: 1s;
transform: translate(300px,300px)rotate(45deg);position: absolute;
}
.zhong{
width: 400px;height: 290px;background: grey;
/* opacity: 0.9; */
position: absolute;
top: 50%;
margin-top: -145px;
transform: rotate(45deg);
transition: 1s;
opacity: 0;
animation: x2 1s
}
.heng{width: 400px;height: 3px;background: blue;margin-top: 60px;opacity: 0;animation: op2 1s;}
p{color: white;text-align: center;opacity: 0;animation: op2 1s;}
.da:hover .zuo {transform: translate(-400px,-400px)rotate(45deg);}
.da:hover .you {transform: translate(-10px,-10px)rotate(45deg);}
.da:hover .zhong{transform: rotate(0);opacity: 0.9;animation: x 1s ;}
.da:hover .heng{transform: rotate(0);opacity:1;animation: op 1s;}
.da:hover p{transform: rotate(0);opacity:1;animation: op 1s;}
@keyframes x{
0%{height: 2px;}
100%{height: 290px;}
}
@keyframes x2{
0%{height: 290px;}
100%{height: 2px;}
}
@keyframes op {
0%{opacity: 0;}
30%{opacity: 0;}
100%{opacity: 1;}
}
@keyframes op2 {
0%{opacity: 1;}
50%{opacity: 0;}
}
</style>
</head>
<body>
<div class="da">
<div class="zuo"></div>
<div class="you"></div>
<div class="zhong">
<p>测试文字</p>
<div class="heng"></div>
<p>测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字</p>
</div>
</div>
</body>
</html>返回的时候也加动画就可以恢复成原来的样子，至于字体和线条出现的时机，可以根据运动时的百分比设定