CSS链接悬停效果的的小创意

前言

每次写a标签的时候我都烦躁，为什么默认是蓝色的，就跟奇怪，关键他那个颜色也用不上，今天想让平凡的a标签也能做出令人眼前一亮的效果，大家以后直接cv多好

悬停滑动高亮链接效果

鼠标悬停后，链接有一个过渡动画，填充背景色，我们从链接周围的填充开始，然后添加相同值的负边距以防止填充破坏文本流。我们将使用box-shadow而不是 background 属性，因为它允许我们转换。

a { 
box-shadow: inset 0 0 0 0 #54b3d6;
color: #54b3d6;
margin: 0 -.25rem;
padding: 0 .25rem;
transition: color .3s ease-in-out, box-shadow .3s ease-in-out;

} 
a:hover { 
box-shadow: inset 100px 0 0 0 #54b3d6; 
color: white; 

}

悬停链接文本交换效果

我们在悬停时将链接的文本与其他一些文本交换。将鼠标悬停在文本上，链接的文本会随着新文本的滑入而滑出。

 <p><a href="#" data-replace="给个三连，好不好嘛"><span>鼠标放到这里试一试</span></a></p>

让我们给链接一些基本样式。我们需要给它相对定位来固定伪元素，确保它的显示是inline-block为了获得盒子元素样式的可供性，并隐藏伪元素可能导致的任何溢出。

  a {
overflow: hidden;
position: relative;
display: inline-block;

}

::before，::after设置为链接的全宽，左侧位置为零，并且绝对定位。

a::before,
a::after {
content: '';
position: absolute;
width: 100%;
left: 0;

}

::after伪元素从 HTML 标记中的链接数据属性获取内容：

a::after {
content: attr(data-replace);

}

transform: translate3d()将::after伪元素元素向右移动 200%，悬停再回到以前的位置。

a::after {
content: attr(data-replace);
top: 0;
transform-origin: 100% 50%;
transform: translate3d(200%, 0, 0);

}

a:hover::after,
a:focus::after {
transform: translate3d(0, 0, 0);

}

我们使用transform: scaleX(0)将::before伪元素，因此默认情况下它是隐藏的。悬停后我们将使它显示出来，就像2px高度一样，并将其固定到 上bottom，使其看起来像文本上的下划线那种感觉，看一下代码就理解我说的意思了

a::before {
background-color: #54b3d6;
height: 2px;
bottom: 0;
transform-origin: 100% 50%;
transform: scaleX(0);

}

a:hover::before,
a:focus::before {
transform-origin: 0% 50%;
transform: scaleX(1);

}

随后加入了transform效果、一些颜色等等以获得完整的效果。