css3动画 a标签

CSS3动画是现代网页设计中的一个不可或缺的元素。通过CSS3动画，我们可以实现更加生动、有趣的页面效果，为网页增添迷人的色彩。

其中，a标签作为文本超链接元素，也可以通过CSS3动画来实现互动效果。

a {
  position: relative;
  display: inline-block;
  color: #000;
  text-decoration: none;
  overflow: hidden;
  transition: color 0.3s ease-in-out;
}

a:after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  width: 0%;
  height: 2px;
  background-color: #000;
  transition: width 0.3s ease-in-out;
}

a:hover {
  color: #fff;
}

a:hover:after {
  width: 100%;
}

上述代码实现了一个简单的a标签hover时动画效果。当鼠标移上a标签时，字体颜色变化，同时底部黑色横线从左往右逐渐加宽，产生一种渐变变化的效果。

总之，CSS3动画可以为我们的网页设计增加更多的动态元素，让页面看起来更加生动有趣。