我试图在将鼠标悬停在 Internet 一词上时更改文本的大小，而不更改其任何其他属性。当结束单词时，我试图减小单词的大小
这是我尝试实现此功能的代码
h1:hover::before,
h1:hover::after {
width: 100%;
}
h1::before {
top: 0;
left: 0;
}
h1::after {
top: 100%;
right: 0;
}
#text:hover{
color:white;
-webkit-转换:规模(1.2)；
<body>
<div class="text-wrapper">
<h1 id='text'>
Hot</h1>
</div>
</body>
最佳答案
像建议的评论一样，您需要向 h1 css 添加过渡:
h1 {
text-align: center;
color: #6849e3;
font-family: Merriweather;
display: inline-block;
position: relative;
// Set transition...
transition: transform .7s ease;
}
并设置低尺度变换:
#text:hover {
color: white;
// Scale transform...
-webkit-transform: scale(0.5);
transform: scale(0.5);
}
调整比例设置和过渡持续时间以分别调整文本大小和过渡速度。
编辑:
如果我没有正确理解您的评论，您希望悬停线为其宽度设置动画，然后“消失”——为此我们可以将动画从全宽反转为无。为此，您需要使用 animation 属性以及 @keyframes。
根据您的评论，我已将行反过来，因此顶行从右到左，底行从左到右，方法是将 h1::before left 属性更改为right:0; h1::after 反之亦然。
然后需要在悬停规则上指定动画:
h1:hover::before,
h1:hover::after {
animation-name: slide;
animation-duration: .5s;
animation-iteration-count: 2;
animation-direction: alternate;
}
有关动画 属性的更多信息:w3schools和 Mozilla docs .
并通过@keyframes指定动画本身:
@keyframes slide {
from {width:0%}
to {width:100%}
}
关于@keyframes的信息:Mozilla docs
body {
Background: #7a86cb;
text-align: center;
}
h1 {
text-align: center;
color: #6849e3;
font-family: Merriweather;
display: inline-block;
position: relative;
transition: transform .7s ease;
}
h1::before,
h1::after {
content: "";
position: absolute;
height: 2px;
background: #6849e3;
}
h1:hover::before,
h1:hover::after {
animation-name: slide;
animation-duration: .5s;
animation-iteration-count: 2;
animation-direction: alternate;
}
h1::before {
top: 0;
right: 0;
}
h1::after {
top: 100%;
left: 0;
}
#text:hover{
color:white;
-webkit-transform: scale(0.5);
transform: scale(0.5);
}
@keyframes slide {
from {width:0%}
to {width:100%}
}<body>
<div class="text-wrapper">
<h1 id='text'>
INTERNET </h1>
</div>
</body>关于html - 将鼠标悬停在文本上以使用 CSS 更改大小，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/56693904/