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

Question

我想将文本缩放为 this .但在本文中不透明度: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>

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