css动画文字悬停效果

具体的效果我就不演示出来了，你可以通过本站的Code online进行在线编程。

HTML部分：

<div class="svg-wrapper">
   <svg height="60" width="100%" xlmns="http://www.w3.org/2000/svg">
   	<rect class="shape" height="60" width="400" />
	<div class="text">THE CODE PLAYER</div>
   </svg>
</div>

css部分：

html, body{
	background: rgb(34, 34, 34);
	text-align: center;
	height: 100%;
	overflow: hidden;
}
.svg-wrapper{
	position: relative;
	top: 50%;
	transform: translateY(-50%);
	margin: 0 auto;
	width: 400px;
}
.shape{
	stroke-dasharray 140 640;
	stroke-dashoffset: -590;
	fill: transparent;
	stroke: #ccff66;
	border-bottom: 5px solid black;
	transition: stroke-width 1s, stroke-dashoffset 1s, stroke-dasharray 1s;
}
.text{
	color: #fff;
	font-family: "Oswald";
	font-size: 24px;
	line-height: 32px;
	letter-spacing: 8px;
	top: -48px;
	position: relative;
}
.svg-wrapper:hover .shape{
	stroke-width: 2px;
	stroke-dashoffset: 0;
	stroke-dasharray: 960;
}

• 洗漱包旅行套装 男出差商务洗簌袋便携化妆包女用品洗护大容量
• 蓝罐（Kjeldsens）曲奇饼干礼盒 454g 丹麦原装进口 休闲零食 节日送礼福利团购
• 适用于新款车载手机支架无线器快充智能自动感应汽车
• 皇顺适配名爵MG7汽车用品MG6PRO改装饰配件MG5门槛条ZS保护贴