如何在css中文本缩放效果
[英]how to text zoom effect in css
问题描述
I want to zoom the text as like this . 
我想缩放文字像这样 。 but in this text opacity:0. 但在此文本中，不透明度为0。 I don't have to hide the text the text opacity:1 and i don't want box as like that only text would be zoom 我不必隐藏文本的透明度：1，并且我不希望像这样的文本框被缩放
I tried the following but without success: 我尝试了以下方法，但没有成功：
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>
3 个解决方案
解决方案1
4 已采纳 2016-05-20 08:15:08
Try something like this: 尝试这样的事情：
HTML 的HTML
<ul>
<li><p>Text effect</p></li>
<li><p>Text effect</p></li>
</ul>
Css 的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;
}
Try here http://jsbin.com/xohimubeso/edit?html,css,output 在这里尝试http://jsbin.com/xohimubeso/edit?html,css，输出
解决方案2
2 2016-05-20 08:14:36
Using transform: scale() like you did is a good way to implement this. 像您一样使用transform: scale()是实现此目的的好方法。 However, you'll want to reset the scale to it's normal value when :hover . 但是，当:hover时，您需要将比例尺重置为其正常值。
Since li have by default display: list-item they take up 100% of the available width. 由于li默认情况下display: list-item因此它们占用可用宽度的100％。 As such, doing the zooming on the center of the li when the text is aligned to the left will make the text disappear. 这样，当文本向左对齐时，在li的中心进行缩放将使文本消失。 Wrap your text in a span that has display: inline-block in order to zoom in on the center of the text instead. 将文本span具有以下display: inline-block ，以放大文本的中心。
Also, the website you linked has the text fade in/out as well. 另外，您链接的网站上的文字也会淡入/淡出。 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 effect. 在您的span添加opacity: 0使其不可见，然后在:hover上将其转换为opacity: 1以实现这种淡入/淡出效果。
Also transform: translateY(100px) is probably not needed, nor is the duplicate transition property inside your :hover . 还要进行transform: translateY(100px)可能不需要transform: translateY(100px) ，也不需要:hover内部的重复transition属性。
Demo 1 - no opacity , no box, animate from left 演示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>
Demo 2 - with opacity , box. 演示2-具有opacity方框。 As shown in attached link 如附件链接所示
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>
解决方案3
1 2019-05-05 04:26:34
you can do the following: 您可以执行以下操作：
<style> #test-text:hover { font-size: 20px; } </style> <body> <p id=test-text>TEST</p> </body>
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.