CSS3鼠标划过样式导航菜单代码

版权：原创更新时间：1年以上

[该文章底部包含文件资源,可根据自己情况,决定是否下载资源使用,时间>金钱,如有需要,立即查看资源]

以下是 CSS3鼠标划过样式导航菜单代码的示例演示效果:

当前平台(PC电脑)

平台:

整屏预览

部分效果截图:

HTML代码(index.html):

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>CSS3鼠标划过样式导航菜单代码</title>
<link rel="stylesheet" href="css/button.min.css" />
</head>
<body>
<div id="workarea">
<div class="position">

<!--start button, nothing above this is necessary -->
<div class="svg-wrapper">
  <svg height="40" width="150" xmlns="http://www.w3.org/2000/svg">
	<rect id="shape" height="40" width="150" />
	<div id="text">
	  <a href=""><span class="spot"></span>Button 1</a>
	</div>
  </svg>
</div>
<!--Next button -->
<div class="svg-wrapper">
  <svg height="40" width="150" xmlns="http://www.w3.org/2000/svg">
	<rect id="shape" height="40" width="150" />
	<div id="text">
	  <a href=""><span class="spot"></span>Button 2</a>
	</div>
  </svg>
</div>
<!--Next button -->
<div class="svg-wrapper">
  <svg height="40" width="150" xmlns="http://www.w3.org/2000/svg">
	<rect id="shape" height="40" width="150" />
	<div id="text">
	  <a href=""><span class="spot"></span>Button 3</a>
	</div>
  </svg>
</div>
<!--End button -->
</div>
</div>
</body>
</html>

CSS代码(button.min.css):

*{margin:0;padding:0}
html,css{width:100%;height:100%}
.position{margin-left:auto;margin-right:auto;text-align:center;margin-top:15%}
#workarea{position:absolute;width:100%;height:100%;background-color:#1e1a3e;font-family:Raleway}
#personal{color:white;text-decoration:none;position:absolute;bottom:15px;right:2%}
.spot{position:absolute;width:100%;height:100%;top:0;left:0}
.svg-wrapper{margin-top:0;position:relative;width:150px;height:40px;display:inline-block;border-radius:3px;margin-left:5px;margin-right:5px}
#shape{stroke-width:6px;fill:transparent;stroke:#009FFD;stroke-dasharray:85 400;stroke-dashoffset:-220;transition:1s all ease}
#text{margin-top:-35px;text-align:center}
#text a{color:white;text-decoration:none;font-weight:100;font-size:1.1em}
.svg-wrapper:hover #shape{stroke-dasharray:50 0;stroke-width:3px;stroke-dashoffset:0;stroke:#06D6A0}

附件:下载该文件资源,减少时间成本(增值服务)