如何在CSS中实现文本缩放效果

Question

我想像 这样 缩放文本。但在本文中不透明度：0。我不必隐藏文本文本不透明度：1 并且我不想要像那样只有文本会缩放的框

我尝试了以下但没有成功：

 ul li {
  transform: scale(10);
  transition: all 0.3s ease-in-out 0.2s;
}

ul li:hover {
  transform: translateY(100px);
  transition: all 0.3s ease-in-out 0.1s;
}

 <ul>
  <li>Text effect</li>
  <li>Text effect</li>
</ul>

原文由 Anubhav pun 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

尝试这样的事情：

HTML

   <ul>
    <li><p>Text effect</p></li>
    <li><p>Text effect</p></li>
  </ul>

CSS

 ul li{
  width: 100px;
  height: 100px;
  background: red;
  color: white;
  display: inline-block;
  float: left;
  margin: 10px;
  overflow: hidden;
  text-align: center;
}
ul li p {
  opacity: 0;
  transform: scale(10);
  transition: all 0.3s ease-in-out 0.2s;
}
ul li:hover p{
  opacity: 1;
  transform: scale(1);
  transition: all 0.3s ease-in-out 0.1s;
}

在这里试试 http://jsbin.com/xohimubeso/edit?html,css,output

原文由 utnaf 发布，翻译遵循 CC BY-SA 3.0 许可协议

Answer 2

像您一样使用 transform: scale() 是实现此目的的好方法。但是，您需要在 :hover 时将比例重置为正常值。

由于 li 默认情况下 display: list-item 它们占据了可用宽度的 100%。因此，当文本向左对齐时，在 li 的中心进行缩放将使文本消失。将文本包装在 span 中，其中包含 display: inline-block 以便放大文本的中心。

此外，您链接的网站也有淡入/淡出的文字。 Add opacity: 0 to your span to make it invisible, and then have it transition to opacity: 1 on :hover to achieve this fade in/out影响。

另外 transform: translateY(100px) 可能不需要，重复的 transition 属性也不需要 :hover 。

演示 1 - no opacity ，没有盒子，从左边开始动画

 ul li {
  background: lightgrey;
  list-style: none;
  margin: 5px 0;
}
ul li span {
  position: relative;
  left: -100%;
  font-size: 20px;
  transform: scale(10);
  transition: all 0.3s ease-in-out 0.2s;
}
ul li:hover span {
  left: 0;
  transform: scale(1);
}
span {
  display: inline-block;
}

 <ul>
  <li><span>Text effect</span></li>
  <li><span>Text effect</span></li>
  <li><span>Text effect</span></li>
  <li><span>Text effect</span></li>
</ul>

演示 2 - 带 opacity ，盒子。如附件链接所示

 ul li {
  list-style: none;
  width: 200px;
  height: 200px;
  border: 5px solid black;
  margin: 10px;
  background: #FAEBD9;
  overflow: hidden;
  float: left;
}
ul li span {
  font-size: 20px;
  opacity: 0;
  transform: scale(10);
  transition: all 0.3s ease-in-out 0.2s;
}
ul li:hover span {
  opacity: 1;
  transform: scale(1);
}
span {
  display: inline-block;
}

 <ul>
  <li><span>Text effect</span></li>
  <li><span>Text effect</span></li>
  <li><span>Text effect</span></li>
  <li><span>Text effect</span></li>
</ul>

原文由 Chris 发布，翻译遵循 CC BY-SA 3.0 许可协议