由 Deepseek提供支持

具体的效果我就不演示出来了，你可以通过本站的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;
}

广告

距本场结束剩 00天 00时 00分 00秒

轻量应用服务器 2核2G

200M峰值带宽，适用于网站搭建、Web应用、容器环境、电商独立站等

立即前往

扫描二维码购买