个人中心
gpt4 book ai didi

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

转载 作者：行者123 更新时间：2023-11-27 22:48:59 25 4
gpt4 key购买 nike

我很纠结...

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

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

这就是它的作用

enter image description here

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

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

  2. 随着移动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/

25 4 0
文章推荐： c++ - 默认情况下，c++ 成员函数是否使用 cdecl+fastcall 约定编译？
文章推荐： Java - 文件上传问题
文章推荐： javascript - jQuery UI 日期选择器(HTML 格式): How using monthNames instead of monthNamesShort?
文章推荐： c++ - 如何使用 Crypto++ 库创建 HMAC 256？
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com