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

当鼠标悬停在单词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）；
}


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

摆弄缩放设置和转换持续时间，分别调整文本大小和转换速度

编辑：

如果我正确理解了您的评论，您希望悬停线上的动画显示其宽度，然后“消失”-我们可以将动画从全宽度反转为零。为此，您需要使用
动画
属性以及
@关键帧

我改变了行的另一种方式，因此根据您的评论，顶行从右向左，底行从左向右，方法是将
h1:：before
left属性更改为
right:0h1:：after
，则为code>，反之亦然

然后需要在悬停规则上指定动画：

h1:hover::before,
h1:hover::after {
   animation-name: slide;
   animation-duration: .5s;
   animation-iteration-count: 2;
   animation-direction: alternate;
}

有关
动画
属性的详细信息：和

并通过
@关键帧指定动画本身：

@keyframes slide {
  from {width:0%}
  to {width:100%}
}

有关
@关键帧的信息：


正文{
背景：#7a86cb；
文本对齐：居中；
}
h1{
文本对齐：居中；
颜色：#6849e3；
字体系列：Merriweather；
显示：内联块；
位置：相对位置；
转变：转变。7秒轻松；
}
h1：：之前，
h1：：之后{
内容：“；
位置：绝对位置；
高度：2倍；
背景#6849e3；
}
h1：悬停：：之前，
h1：悬停：：之后{
动画名称：幻灯片；
动画持续时间：.5s；
动画迭代次数：2次；
动画方向：交替；
}
h1：：之前{
排名：0；
右：0；
}
h1：：之后{
最高：100%；
左：0；
}
#文本：悬停{
颜色：白色；
-webkit变换：比例（0.5）；
变换：比例（0.5）；
}
@关键帧滑动{
从{宽度：0%}
到{宽度：100%}
}

互联网
与建议的注释一样，您需要向
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);
}

摆弄缩放设置和转换持续时间，分别调整文本大小和转换速度

编辑：

如果我正确理解了您的评论，您希望悬停线上的动画显示其宽度，然后“消失”-我们可以将动画从全宽度反转为零。为此，您需要使用
动画
属性以及
@关键帧

我改变了行的另一种方式，因此根据您的评论，顶行从右向左，底行从左向右，方法是将
h1:：before
left属性更改为
right:0h1:：after
，则为code>，反之亦然

然后需要在悬停规则上指定动画：

h1:hover::before,
h1:hover::after {
   animation-name: slide;
   animation-duration: .5s;
   animation-iteration-count: 2;
   animation-direction: alternate;
}

有关
动画
属性的详细信息：和

并通过
@关键帧指定动画本身：

@keyframes slide {
  from {width:0%}
  to {width:100%}
}

有关
@关键帧的信息：


正文{
背景：#7a86cb；
文本对齐：居中；
}
h1{
文本对齐：居中；
颜色：#6849e3；
字体系列：Merriweather；
显示：内联块；
位置：相对位置；
转变：转变。7秒轻松；
}
h1：：之前，
h1：：之后{
内容：“；
位置：绝对位置；
高度：2倍；
背景#6849e3；
}
h1：悬停：：之前，
h1：悬停：：之后{
动画名称：幻灯片；
动画持续时间：.5s；
动画迭代次数：2次；
动画方向：交替；
}
h1：：之前{
排名：0；
右：0；
}
h1：：之后{
最高：100%；
左：0；
}
#文本：悬停{
颜色：白色；
-webkit变换：比例（0.5）；
变换：比例（0.5）；
}
@关键帧滑动{
从{宽度：0%}
到{宽度：100%}
}

互联网
通过更改字体大小？是的，我尝试过，但没有更新我的代码。在哪里？我们没有看到任何字体大小更新我已经编辑了我的代码是的，正如你所看到的，它工作得很好，但是有一个奇怪的动画，因为你正在减少它很多，并且没有通过改变字体大小进行转换？是的，我试过了，但是没有更新我的代码在哪里？我们没有看到任何字体大小的更新我已经编辑了我的代码是的，正如你所看到的，它工作得很好，但是有一个奇怪的动画，因为你减少了很多，没有过渡。是的，我知道了，谢谢。你能帮我弄一下上面和下面的线吗。当悬停单词“我是”时，顶行从R->L开始，消失，反之为底行line@osama我已经编辑了我的答案。您需要使用
动画
属性和
@关键帧
来执行此操作：请参阅答案和代码片段。是的，它成功了，我明白了，谢谢。你能帮我弄一下上面和下面的线吗。当悬停单词“我是”时，顶行从R->L开始，消失，反之为底行line@osama我已经编辑了我的答案。您需要使用
动画
属性和
@关键帧
来执行此操作：请参阅答案和代码片段。