Question

我试图将鼠标悬停在Internet上时更改文本的大小，而不更改其任何其他属性。超过单词时，我正在尝试decrease单词的大小

这是我尝试实现此功能的代码

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-transform：scale（1.2）; }

<body>
  <div class="text-wrapper">


    <h1 id='text'>
      Hot</h1>


  </div>
</body>

Answer 1

就像建议的注释一样，您需要向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;
}

有关animation属性的更多信息：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>

将鼠标悬停在文本上以使用CSS更改大小

1 个答案: