链接悬浮画圈动画效果代码-html代码-BFW代码库

链接悬浮画圈动画效果代码

代码语言：html

所属分类：悬停

代码描述：链接悬浮画圈动画效果代码

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


<!DOCTYPE html>
<html lang="en" >

<head>

  <meta charset="UTF-8">



<style>
:root {
  --text: #2B3044;
  --line: #BBC1E1;
  --line-active: #275EFE;
}

p {
  font-size: 18px;
  margin: 0;
  color: var(--text);
}
p a {
  display: inline-block;
  position: relative;
  text-decoration: none;
  color: inherit;
  margin: 0 var(--spacing, 0px);
  -webkit-transition: margin .25s;
  transition: margin .25s;
}
p a svg {
  width: 76px;
  height: 40px;
  position: absolute;
  left: 50%;
  bottom: 0;
  -webkit-transform: translate(-50%, 7px) translateZ(0);
          transform: translate(-50%, 7px) translateZ(0);
  fill: none;
  stroke: var(--stroke, var(--line));
  stroke-linecap: round;
  stroke-width: 2px;
  stroke-dasharray: var(--offset, 69px) 278px;
  stroke-dashoffset: 361px;
  -webkit-transition: stroke 0.25s ease var(--stroke-delay, 0s), stroke-dasharray 0.35s;
  transition: stroke 0.25s ease var(--stroke-delay, 0s), stroke-dasharray 0.35s;
}
p a:hover {
  --spacing: 4px;
  --stroke: var(--line-active);
  --stroke-delay: .1s;
  --offset: 180px;
}

html {
  box-sizing: border-box;
  -webkit-font-smoothing: antialiased;
}
.........完整代码请登录后点击上方下载按钮下载查看