svg+css实现鼠标悬浮画圈圈动画效果代码-html代码-BFW代码库

svg+css实现鼠标悬浮画圈圈动画效果代码

代码语言：html

所属分类：悬停

代码描述：svg+css实现鼠标悬浮画圈圈动画效果代码

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

<!DOCTYPE html>
<html lang="en" >
<head>
  <meta charset="UTF-8">
<style>
    html,
body {
  background: #a9e1fa;
  height: 100%;
}

a {
  text-decoration: none;
}

.menu {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
}

.menu__link {
  display: inline-block;
  color: #2d6c90;
  text-decoration: none;
  position: relative;
  padding: 14px 0;
  font-family: 'Muli', sans-serif;
  font-weight: 300;
  font-size: 22px;
  line-height: 1;
  letter-spacing: 0.040em;
}

.menu__link svg {
  fill: none;
  stroke: #000000;
  stroke-width: 1;
  stroke-miterlimit: 4;
  stroke-dasharray: 338;
  stroke-dashoffset: 338;
  stroke-linecap: round;
  position: absolute;
  top: 50%;
  left: 50%;
  width: calc(100% + 60px);
  opacity: 0;
  transform: translate(-50%, -50%);
  transition: stroke-dashoffset 0s 1.9s, opacity 0.8s;
  z-index: -1;
}

.menu__link--active svg {
  stroke: #ff4c4c;
}

.menu__link--active svg,
.menu__link:hover svg {
  stroke-dashoffset: 0;
  opacity: 1;
  transition: opacity 0s, stroke-dashoffset 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
}
</style>

</head>
<body>
<!-- partial:index.partial.html -->
<div class="menu">
  <a href="#" class="menu__link menu__link--active">
    Home
   <svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
	 viewBox="0 0 46 18" style="enable-background:new 0 0 46 18;" xml:space="preserve">
<g>
	<path d="M37.72,2.71c-4.36-0.57-8.75-0.78-13.12-0.7c-4.35-0.14-8.69,0.53-12.85,1.76C9.67,4.4,7.63,5.19,5.79,6.26
		C4.88,6.8,3.99,7.43,3.42,8.21c-0.3,0.38-0.45,0.8-0.53,1.26c-0.01,0.44,0.03,0.89,0.29,1.28c0.46,0.81,1.35,1.42,2.27,1.9
		c0.94,0.48,1.95,0.85,2.98,1.16c2.07,0.61,4.22,1.02,6.37,1.33c4.32,0.6,8.7,0.86,13.07,0.82c2.18-0.03,4.37-0.11,6.49-0.47
		c2.15-0.37,4.31-0.77,6.37-1.4c1.02-0.32,2.03-0.71,2.83-1.29c0.81-0.58,1.16-1.43,0.81-2.32c-0.3-0.86-1.1-1.57-1.97-2.12
		c-0.87-0.57-1.88-0.96-2.88-1.36c-4.02-1.6-8.39-2.38-12.72-3.09c2.19,0.15,4.39,0.37,6.57,0.7c2.18,0.34,4.36,0.77,6.49,1.45
		c1.06,0.37,2.09,0.83,3.07,1.45c0.95,0.62,1.94,1.41,2.38,2.65c0.2,0.6,0.27,1.3,0.02,1.94c-0.23,0.64-0.7,1.13-1.18,1.5
		c-0.99,0.71-2.06,1.11-3.13,1.45c-2.15,0.65-4.33,1.05-6.5,1.43c-2.22,0.38-4.44,0.45-6.65,0.48c-4.42,0.04-8.84-0.22-13.22-0.83
		c-2.19-0.32-4.37-0.73-6.52-1.37c-1.07-0.33-2.13-0.72-3.15-1.23c-1-0.53-2.04-1.18-2.68-2.3c-0.35-0.54-0.45-1.24-0.41-1.88
		c0.09-0.62,0.34-1.26,0.72-1.74c0.74-0.99,1.7-1.64,2.67-2.22c1.96-1.15,4.05-1.94,6.18-2.59c4.25-1.26,8.72-1.94,13.16-1.81
		C29.02,1.26,33.43,1.73,37.72,2.71z"/>
</g>
</svg>
  </a><br>
  <a href="#" class="menu__link">
    About
      <svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
	 viewBox="0 0 46 18" style="enable-background:new 0 0 46 18;" xml:space="preserve">
<g>
	<path d="M37.72,2.71c-4.36-0.57-8.75-0.78-13.12-0.7c-4.35-0.14-8.69,0.53-12.85,1.76C9.67,4.4,7.63,5.19,5.79,6.26
		C4.88,6.8,3.99,7.43,3.42,8.21c-0.3,0.38-0.45,0.8-0.53,1.26c-0.01,0.44,0.03,0.89,0.29,1.28c0.46,0.81,1.35,1.42,2.27,1.9
		c0.94,0.48,1.95,0.85,2.98,1.16c2.07,0.61,4.22,1.02,6.37,1.33c4.32,0.6,8.7,0.86,13.07,0.82c2.18-0.03,4.37-0.11,6.49-0.47
		c2.15-0.37,4.31-0.77,6.37-1.4c1.02-0.32,2.03-0.71,2.83-1.29c0.81-0.58,1.16-1.43,0.81-2.32c-0.3-0.86-1.1-1.57-1.97-2.12
		c-0.87-0.57-1.88-0.96-2.88-1.36c-4.02-1.6-8.39-2.38-12.72-3.09c2.19,0.15,4.39,0.37,6.........完整代码请登录后点击上方下载按钮下载查看