A 标签有趣的样式

在网上看到很多对 <a> 标签样式的设计，觉得很有趣，做了个实现原理和 demo 的整理收集。

浏览器默认，Hover 状态有下划线

实现原理

A 标签在浏览器默认样式下是有下划线的，可以通过 text-decoration 属性进行设置，当值为 none 时隐藏。常见网站的处理都是隐藏它，但为了突出它是一个超链接， 会给它一个区别其它文本的颜色。

样式代码

a {
  color: #383c93;
  text-decoration: none;
}

CSS 自带属性实现波纹效果

实现原理

超链接 text-decoration 下面自带有属性 line、 color、style、thickness 等属性，还可以通过 text-underline-offset 设置文本装饰距离文本的距离。

样式代码

a:hover {
  text-underline-offset: 6px;
  text-decoration-thickness: 2px;
  text-decoration-style: wavy;
}

底部边框，Hover 状态移动遮罩效果

实现原理

第一步：清除 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);
}

Hover 状态滑动的下划线

实现原理

第一步：清除 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%;
}