Question

我想要这样的过渡

#my-div {
  width: 20px;
  transition: width 1s ease;
}

#my-div:hover {
  width: 100%
}

在我的div内将有一个位于20px内的图标。当您将鼠标悬停在图标上时，宽度将扩展到其父容器。这就是我要绊倒的地方。我希望文本“自动刷新”始终以100％宽度居中。因此，当容器的宽度为20px时，“自动刷新”文本将被隐藏，因为它的位置太远了（也就是说，它不能容纳在20px的宽度内）。当您将鼠标悬停在图标上时，宽度会扩大，显示隐藏的“自动刷新”文本。

我尝试使用overflow: no-wrap和overflow: hidden，但是隐藏似乎无济于事。我想知道CSS是否有可能，或者是否需要使用多层并使用javascript触发这些层上的动画。这就是我要的效果。

在橙色div的绝对中心应为“自动刷新”。我希望gif能很好地传达我的目标。重要的是，该文本在鼠标悬停之前是隐藏的，而橙色背景在其上滑动时则慢慢地显示出该文本，就好像它一直在那儿一样，但之前只是隐藏了。

我是否需要多层并通过javascript触发动画才能完成此任务？还是在纯CSS中可行？

相关HTML（请原谅内联样式。我不太喜欢开发工具）

<div class="col-sm-6 col-md-4 col-12 region-div us-region-div">
<div class="inner border-grey-light">
    <div id="us-datasource" class="crossfade data-source-blizzard-api">
        <img class="bottom" src="assets/data-source-blizzard-api-30x30.png" title="Price data from Battle.net Web API" alt="Price data from Battle.net Web API">
        <img class="top" src="assets/data_source_wow_30x30.png" title="Price data from in-game" alt="Price data from in-game">
    </div>
    <a href="US"><h3 class="region-title">US</h3></a>
    <p class="money-text"><span id="us-money-text" class="odometer">175,673</span><img src="assets/gold-transparent-compressed.png" class="gold"></p>
    <div class="price-trend">
        <span class="money-text-small">
            <span id="us-arrow" class="crossfade down-arrow arrow">
                <img class="bottom" src="assets/downarrow-resized.png">
                <img class="top" src="assets/uparrow-resized.png">
            </span>
            <span id="us-money-text-small" class="odometer">-1,206</span>
            <img src="assets/gold-transparent-compressed.png" class="gold-small">
        </span>
    </div>
    <p id="us-last-change-text" class="last-change">&nbsp;</p>
    <p id="us-datetime" class="region-date">&nbsp;</p>
    <div class="refresh-container">
        <div id="patreon">
            <i class="fab fa-patreon" style="
            color: white;
            font-size: 1.25rem;
            top: 12px;
            position: absolute;
            left: 12px;
            "></i>
        </div>
        <a href=""><p id="us-new-price" class="lead new-price show-price"><i id="us-price-refresh-icon" class="fas fa-sync-alt"></i> New Price!</p></a>
    </div>
</div>

Answer 1

您可以使用clip-path来模拟矩形div容器展开时所显示文本的错觉。纯CSS，以下是您可以应用于代码的相关HTML和CSS：

#my-div {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
  background-color: #000;
  color: #FFF;
  padding: 20px;
  
  /* Relevant starting here */
  width: 400px;
  transition: clip-path 1s ease;
  clip-path: polygon(0 0, 20% 0%, 20% 100%, 0% 100%);
}

#my-div:hover {
  clip-path: polygon(0 0, 100% 0%, 100% 100%, 0% 100%);
}

<div id = "my-div">This is a test div</div>

在容器中水平“显示”文本

1 个答案: