时间戳

首页 > 解决方案 > 在转换期间隐藏文本（即缩放），使其仅在转换结束后可见，同时保持文本大小不变

html - 在转换期间隐藏文本（即缩放），使其仅在转换结束后可见，同时保持文本大小不变

问题描述

请原谅基本问题。我已经建立了一个:hover以transform: scale(6.5). 在圆圈内，我想隐藏文本，直到转换完成。此外，文本大小需要保持不变（即没有转换）。我已经尝试过transform: unset !important;并玩过，visibility但它们并没有像我希望的那样发挥作用。任何帮助表示赞赏。

// this block works as expected
.expand {
  transition: transform .8s;
  width: 1px;
  height: 1px;
  border-radius: 50%;
  margin: 0 auto;
}

// this block works as expected
.expand:hover {
  transform: scale(6.5);
}

.no-expand {
  width: 100px;
  visibility: hidden;
}

.no-expand:hover {
  transition: transform .8s;
  visibility: visible;
  transform: unset !important;
}
<div>
  <div class='expand'>
    <div class='no-expand'>
      This is a circle
    </div>
  </div>
</div>

标签： htmlcss

解决方案

新的我在悬停部分添加了字体大小。

    .expand {
    transition: transform .8s;
    width: 100px;
    height: 100px;
    background:black;
    border-radius: 50%;
    line-height:80px;
    text-align:center;
    color:transparent;
    position:absolute;
    top:50%;
    left:50%;
    overflow:hidden;
}
.expand:hover {
    transform: scale(6.5); 
    color:white;
    font-size: 2px;
}
      <div class='expand'>
          This is a circle 
      </div>

推荐阅读