Question

您好我是css的新手，我遇到了这个文字下划线动画，我无法理解它是如何工作的。如果我从这段代码中取出一些东西，它就会停止工作。提前谢谢！

body {
  background-color: black;
}
body a {
  font-weight: 200;
  font-size: 18px;
  text-transform: uppercase;
  text-decoration: none;
  position: relative;
  color: #fff;
}
body a:visited {
  color: white;
}
body a:hover {
  color: white;
}
body a:after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  width: 0%;
  border-bottom: 2px solid #fff;
  transition: 0.4s;
}
body a:hover:after {
  width: 100%;
}

<body>
<a href="#">aaaaaaaaaaaaaaaaaaaaaaaaaaaaa</a>
</body>

Answer 1

一个:after伪的CSS意味着另一个＆＃34;虚拟＆＃34;元素将附加在所选元素

之后

a:after附加的psuedo元素是一个底部为border的简单元素，但没有宽度（0%）

该元素上的transition属性意味着更改后该元素的所有属性都将被设置为动画

所以...

当你悬停元素时（在body a:hover:after中说明） - 那个＆＃34;虚拟＆＃34;的宽度element设置为100％ - 动画发生

Answer 2

这里真正重要的是伪元素＆＃34;：＆＃34;和＆＃34;：之前＆＃34; （虽然这最后一个不在这里）。

这部分就是它的生命：

body a:after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  width: 0%;
  border-bottom: 2px solid #fff;
  transition: 0.4s;
}

你看，基本上你正在查看元素的伪元素的属性声明。（你可能想深入研究一下CSS-CSS3）。

它声明在触发悬浮事件后，作为身体子的锚点，它将使其伪元素的底部边框宽度为2像素，白色纯色，过渡为0.4秒。

我们可以通过其他声明来判断伪元素的宽度在初始状态下是0％，并且在悬停之后它会转换为100％（从示例中看到它从左到右）

这个CSS代码需要考虑很多事情，但你应该学习基础知识！

Answer 3

此行创建动画：过渡：0.4s;

你会注意到身体a：悬停：规则后宽度为100％。好吧，该转换属性告诉渲染引擎，在正常和悬停状态之间具有值更改的任何属性上都要执行动画。

当您悬停时，渲染引擎会读取您要将width属性设置为100％。在悬停之前，它被设置为0％。 Transition说，“好吧，在悬停时，将宽度属性设置为在0到100％的范围内，在十分之四秒的时间内。

对于悬停和非悬停状态之间不同的任何属性都是如此。换句话说，只要两个状态使用不同的值定义相同的属性，就可以一次动画多个属性。

有人可以向我解释这个css代码

3 个答案: