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.233.242.67,欢迎您的访问!

温馨提示 : 非特殊注明,否则均为李联华的博客原创文章,本站文章未经授权禁止任何形式转载
文章链接:https://www.ooize.com/css-animated-text-hovering-effect.html

订阅文章

在下面输入您的电子邮件地址以订阅我们的文章

订阅
提醒
guest

0 评论
内联反馈
查看所有评论
Loading...