时间戳

首页 > 解决方案 > 如何在不转换的情况下将文本放置在移动的 div 上

html - 如何在不转换的情况下将文本放置在移动的 div 上

问题描述

我在相当一个泡菜...

所以这是我的情况，当鼠标悬停在它上面时，我想制作一个移动动画。

发生这种情况时，我希望在此 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);
}

这就是它正在做的

在此处输入图像描述

无论我做什么，如果没有它，我根本找不到将文本放在移动分隔线上的方法：

  1. 不与移动的 div 停留在同一个 x 平面上

  2. 被移动的 div 改造

标签： htmlcssanimationcss-animationscss-transitions

解决方案

希望这就是你要找的。如果您不希望文本移动，则应将绝对位置添加到黄色 div，并将相对位置添加到父 div。然后您可以根据需要定位黄色 div。另外，你应该把宽度：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>

推荐阅读