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;
}

©️李联华的博客网 当前IP地址：3.144.118.122，归属地:俄亥俄州Dublin ，欢迎您的访问！