a标签下划线悬浮动画效果-html代码-BFW代码库

a标签下划线悬浮动画效果

代码语言：html

所属分类：悬停

代码描述：a标签下划线悬浮动画效果

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开


<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<style>
.underline {
  --line: #646B8C;
  --color: #2B3044;
  text-decoration: none;
  color: var(--color);
  position: relative;
}
.underline span {
  background-image: -webkit-gradient(linear, left bottom, left top, from(var(--line)), to(var(--line)));
  background-image: linear-gradient(0deg, var(--line) 0%, var(--line) 100%);
  background-position: 100% 100%;
  background-repeat: no-repeat;
  background-size: var(--background-size, 100%) 1px;
  -webkit-transition: background-size 0.2s linear var(--background-delay, 0.15s);
  transition: background-size 0.2s linear var(--background-delay, 0.15s);
  font-size: 16px;
  line-height: 20px;
  -webkit-transform: translateZ(0);
          transform: translateZ(0);
}
.underline svg {
  vertical-align: top;
  display: inline;
  line-height: 1;
  width: 13px;
  height: 20px;
  position: relative;
  left: -2px;
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1px;
  stroke: var(--line);
  stroke-dasharray: 7.95 30;
  stroke-dashoffset: var(--stroke-dashoffset, 46);
  -webkit-transition: stroke-dashoffset var(--stroke-duration, 0.15s) var(--stroke-easing, linear) var(--stroke-delay, 0s);
  transition: stroke-dashoffset var(--stroke-duration, 0.15s) var(--stroke-easing, linear) var(--stroke-delay, 0s);
}
.underline:hover {
  --background-size: 0%;
  --background-delay: 0s;
  --stroke-dashoffset: 26;
  --stroke-duration: .3s;
.........完整代码请登录后点击上方下载按钮下载查看