这是我的代码。
第一我想让第二个文本比第一个文本增加更多的文字(即 font-size
可 20px
和 font-size
第二种可能是 100px
,其只是一个例子)。)
另外 当我使用这个代码时,字是 "摇"。你能看到这个吗?
我怎么能用这段代码做这两件事呢?
谅谅
.ilustration h1 {
/* border: 1px solid red; */
text-align: center;
font-size: 54px;
font-weight: lighter;
color: transparent;
background-color: green;
}
.ilustration h1:hover {
color: white;
opacity: 1;
transition: 1s;
font-weight: 100;
font-style: oblique;
font-size: 70px;
background-color: black;
}
<div class="ilustration">
<h1 class="hover_effect">
First Text <br />
<span class="cor">Second Text</span>
</h1>
</div>
你应该使用 transition: transform 1s;
和 transform: scale(1.5);
顺利过渡
同样摇摇欲坠的事情取决于多种因素,比如。
font-size, font-family
等等......在悬浮浏览器上往往会匹配动态的字体大小,所以你必须玩转,才能得到准确的匹配,不至于出现抖动的功能。
而
如果要在同一父体内有不同的字体大小,那么你可以这样做。
.ilustration:hover h1 {...}
.ilustration:hover span {...}
以下是两个问题的答案
.ilustration h1 {
/* border: 1px solid red; */
text-align: center;
font-size: 54px;
font-weight: lighter;
color: transparent;
}
.ilustration:hover h1 {
color: white;
font-weight: 100;
font-style: oblique;
font-size: 70px;
background-color: black;
transform: scale(1.5);
opacity: 1;
transition: transform 1s;
}
.ilustration:hover span {
color: white;
font-weight: 100;
font-style: oblique;
font-size: 120px;
background-color: black;
transform: scale(1.5);
opacity: 1;
transition: transform 1s;
}
<div class="ilustration">
<h1 class="hover_effect">
First Text <br />
<span class="cor">Second Text</span>
</h1>
</div>