css移动鼠标切换连接 |css3源码

a {
color: #000;
text-decoration: none;
position: relative;
}
a:hover:after {
content: "";
height: 2px;
width: 100%;
position: absolute;
bottom: -2px;
left: 0;
background-color: #000;
animation: slideLeftRight .7s cubic-bezier(0.215, 0.61, 0.355, 1);
}
@keyframes slideLeftRight {
0% {
width: 0;
left: 50%;
}
50% {
width: 100%;
left: 0;
}
100% {
width: 0;
left: 0;
}
}

这个代码块中，a标签的color和text-decoration属性被设置为了默认的黑色和无下划线，同时设置relative使得a标签定位在自身的位置上。当鼠标悬浮在a标签上时，通过:hover伪类触发:after伪元素生成的水平线条。水平线条的大小、位置、颜色等属性都可以根据自己的需求进行修改。最后动画效果可以用CSS3的animation来实现。

通过这种方式实现CSS移动鼠标切换连接的效果，可以使得网页设计更加生动、有趣。值得注意的是，任何动效都需要在不影响网页性能的情况下选择适当的实现方式，避免带来不必要的加载时间。