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

Answer 2

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

由于li默认为display: list-item，因此它们占用了可用宽度的100％。因此，当文本向左对齐时，在li的中心进行缩放将使文本消失。将文字换成span display: inline-block，以便放大文字的中心。

此外，您链接的网站也有文字淡入/淡出。将opacity: 0添加到span以使其不可见，然后将其转换为opacity: 1上的:hover以实现淡入/淡出效果。

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

演示1 - 没有`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>

Answer 3

您可以执行以下操作：

<style>
#test-text:hover {
font-size: 20px;
}


</style>

<body>
<p id=test-text>TEST</p>
</body>

如何在CSS中文字缩放效果

3 个答案:

演示1 - 没有`opacity`，没有框，左边是动画

演示2 - 使用`opacity`，框。如附件链接

如何在CSS中文字缩放效果

3 个答案:

演示1 - 没有opacity，没有框，左边是动画

演示2 - 使用opacity，框。如附件链接

演示1 - 没有`opacity`，没有框，左边是动画

演示2 - 使用`opacity`，框。如附件链接