我很纠结...
这是我的情况，我想在鼠标悬停在它上面时制作一个移动动画。
发生这种情况时，我希望在该 div 上分层的文本保持在同一位置。
在我的设置中，我有一个父 div，当鼠标悬停在它上面时，它控制其中的黄色 div。在父 div 内部还有我想放置在黄色 div 边缘并在动画期间保持静态的文本。
html:
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<h1>Lorem</h1>
<br>
<h2>ipsum dolor</h2>
<br><br><br>
<div>
<div id="yellow-con">
<div><p><b>button</b></p></div>
<div class="yellow"></div>
</div>
</div>
</body>
</html>
CSS:
p {
display: inline;
font-family: 'Crimson Text';
color: #faf3dd;
font-size:5vh;
z-index: 2;
}
#yellow-con {
background-color: #000000;
height: auto;
width: 100%
}
.yellow {
display: inline-block;
left: 20%;
height: 7%;
position: relative;
transition: transform 0.4s ease;
transform-origin: right;
transform: scaleX(0px);
width: 80%;
background-color: #fccd34;
z-index: 1;
}
#yellow-con:hover .yellow {
transform: scaleX(.75);
}
这就是它的作用
无论我做什么，如果没有它，我根本找不到将文本放在移动分隔线上的方法:
不与移动的 div 保持在同一个 x 平面上
随着移动div的变化
最佳答案
希望这就是您要找的。如果您不希望文本移动，您应该将绝对位置添加到您的黄色 div 以及相对位置到您的父 div。然后你可以根据需要定位黄色的div。另外，你应该把 width: 80%;在你的 scaleX(0) 之前，这样变换就可以工作，你也应该给 scaleX 变换，0 作为一个值，而不是 0px。
运行代码段以查看结果。
p {
display: inline;
font-family: 'Crimson Text';
color: #faf3dd;
font-size:5vh;
z-index: 2;
}
#yellow-con {
background-color: #000000;
height: auto;
position: relative;
padding: 10px;
}
.yellow {
position: absolute;
left: 20%;
top: 0;
height: 100%;
transition: transform 0.4s ease;
transform-origin: right;
width: 80%;
transform: scaleX(0);
background-color: #fccd34;
z-index: 1;
}
#yellow-con:hover .yellow {
transform: scaleX(.75);
}<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<h1>Lorem</h1>
<br>
<h2>ipsum dolor</h2>
<br><br><br>
<div>
<div id="yellow-con">
<div><p><b>button</b></p></div>
<div class="yellow"></div>
</div>
</div>
</body>
</html>关于html - 如何在不转换的情况下将文本放在移动的 div 上，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/59539997/