在网上看到很多对 <a> 标签样式的设计，觉得很有趣，做了个实现原理和 demo 的整理收集。
A 标签在浏览器默认样式下是有下划线的，可以通过 text-decoration 属性进行设置，当值为 none 时隐藏。常见网站的处理都是隐藏它，但为了突出它是一个超链接，
会给它一个区别其它文本的颜色。
a {
color: #383c93;
text-decoration: none;
}
超链接 text-decoration 下面自带有属性 line、 color、style、thickness 等属性，还可以通过 text-underline-offset 设置文本装饰距离文本的距离。
a:hover {
text-underline-offset: 6px;
text-decoration-thickness: 2px;
text-decoration-style: wavy;
}
第一步：清除 A 标签默认下划线和 Hover 状态下的下划线样式。将它的颜色继承和其它文本颜色一致。这里会利用样式让它区别于其它文本；
第二步：然后利用伪元素 :after 设置特殊背景色，相较于 <a> 元素做绝对定位，模拟出位于底部的边框；
第三步：鼠标移动上去的时候，改变 :after 形成的颜色边框的位置，然后利用 transition 增加过度动画，让它有一个移动拉伸的效果。
a {
position: relative;
white-space: nowrap;
text-decoration: none;
color: inherit;
}
a:hover {
text-decoration: none;
}
a:after {
content: '';
position: absolute;
z-index: -1;
top: 68%;
left: -0.1em;
right: -0.1em;
bottom: 0;
transition: top 200ms cubic-bezier(0, 0.8, 0.13, 1);
background-color: #4d52bb;
}
a:hover::after {
top: 0%;
}
第一步：清除 A 标签默认下划线和 Hover 状态下的下划线样式。将它的颜色继承和其它文本颜色一致。这里会利用样式让它区别于其它文本；
第二步：然后利用伪元素 ::before 设置特殊背景色，相较于 <a> 元素做绝对定位，模拟出位于底部的边框；
第三步：鼠标移动上去的时候，改变 ::before 形成的颜色边框在X轴方向进行伸展，然后利用 transition 增加过度动画，让它有一个移动拉伸的效果。
a {
position: relative;
}
a:hover {
text-decoration: none;
}
a::before {
content: '';
width: 80%;
position: absolute;
top: 68%;
left: 0;
bottom: 0;
z-index: -1;
background: linear-gradient(45deg, #ee2d29, #f8ae2c);
transition: transform 0.8s cubic-bezier(0.2,1,0.3,1);
transform: scale3d(1,1,1);
transform-origin: 0 0;
}
a:hover::before {
transition: transform 0.8s cubic-bezier(0.2,1,0.3,1);
transform: scale3d(1.2,1,1);
}
第一步：清除 A 标签默认下划线和 Hover 状态下的下滑线显示，设置有别于其它文本的颜色做区分；
第二步：利用伪元素 :before 把它设置成和字体颜色一致的底部边框，然后将它的长度通过 scale 变换设置成 0；
第三步：增加鼠标移动上去的样式，将边框的长度恢复，再增加个过度效果，模拟出动态伸展的效果。
a {
position: relative;
}
a:hover {
text-decoration: none;
}
a::before {
content: '';
position: absolute;
display: block;
width: 100%;
height: 2px;
bottom: 5%;
left: 0;
background-color: #4d52bb;
transform: scaleX(0);
transition: transform 0.3s ease;
}
a:hover::before {
transform: scaleX(1);
}
原理讲解参考 https://www.cnblogs.com/coco1s/p/11910097.html
@function fact($number) {
$value: 1;
@if $number>0 {
@for $i from 1 through $number {
$value: $value * $i;
}
}
@return $value;
}
@function pow($number, $exp) {
$value: 1;
@if $exp>0 {
@for $i from 1 through $exp {
$value: $value * $number;
}
}
@else if $exp < 0 {
@for $i from 1 through -$exp {
$value: $value / $number;
}
}
@return $value;
}
@function rad($angle) {
$unit: unit($angle);
$unitless: $angle / ($angle * 0 + 1);
@if $unit==deg {
$unitless: $unitless / 180 * pi();
}
@return $unitless;
}
@function pi() {
@return 3.14159265359;
}
@function sin($angle) {
$sin: 0;
$angle: rad($angle);
// Iterate a bunch of times.
@for $i from 0 through 15 {
$sin: $sin + pow(-1, $i) * pow($angle, (2 * $i + 1)) / fact(2 * $i + 1);
}
@return $sin;
}
@function shadowSetColor($vx, $vy, $direction, $count, $color) {
$shadow : 0 0 0 0 $color;
@for $i from 0 through $count {
$color: lighten($color, .5);
$x: sin($i / 8) * $vx * $direction;
$y: $i * $vy;
$shadow: $shadow, #{$x} #{$y} 0 0 $color;
}
@return $shadow;
}
a {
position: relative;
}
a:hover {
text-decoration: none;
}
a::before {
content: '';
position: absolute;
bottom: 2%;
left: 0;
display: block;
width: 2px;
height: 2px;
background: var(--ifm-color-primary);
border-radius: 50%;
box-shadow: shadowSetColor(4px, 2px, -1, 60, green);
transform: rotate(-90deg);
}
清除 A 标签默认下划线和 Hover 状态下的下滑线显示，对 A 标签内容设置背景，长宽分别为 2px ，然后通过在横轴上重复形成一条直线；当鼠标悬停时将背景变换为一个 svg 格式的动态的波纹动画。
a {
background: linear-gradient(to bottom, #0087ca 0%, #0087ca 100%);
background-position: 0 100%;
background-repeat: repeat-x;
background-size: 2px 2px;
color: inherit;
text-decoration: none;
}
a:hover {
background-image: url('data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 4'%3E%3Cstyle type='text/css'%3E.squiggle{animation:shift .3s linear infinite;}@keyframes shift {from {transform:translateX(0);}to {transform:translateX(-15px);}}%3C/style%3E%3Cpath fill='none' stroke='%230087ca' stroke-width='2' class='squiggle' d='M0,3.5 c 5,0,5,-3,10,-3 s 5,3,10,3 c 5,0,5,-3,10,-3 s 5,3,10,3'/%3E%3C/svg%3E');
background-size: auto 4px;
text-decoration: none;
}
设置 A 元素的背景色，背景色的高度为元素高度的 40%，默认状态下的长度为 0， 当鼠标放上去的时候背景色大小做变换，长度变为 97%。
a {
padding-bottom: .2%;
transition: background-size .6s ease-out;
background: linear-gradient(var(--ifm-color-primary-lightest),
var(--ifm-color-primary-lightest)) no-repeat left 123%/0 40%
}
a:hover {
text-decoration: none;
background-size: 97% 40%;
}联系客服
