源码
<span class="progress" data-txt="fly63-前端开发网,感谢您的使用!">fly63-前端开发网,感谢您的使用!</span>
<style>
.progress {
color: #bbb;
position: relative;
font-size: 32px;
cursor: pointer;
}
.progress::after {
content: attr(data-txt);
color: #fff;
display: inline-block;
position: absolute;
left: 0;
top: 0;
word-break: keep-all;
white-space: nowrap;
width: 0%;
overflow: hidden;
transition: width 1s linear;
background-color: #67C23A;
text-shadow: 0px 1px 2px #67C23A;
}
.progress:hover::after {
width: 100%;
}
</style>
本文内容仅供个人学习/研究/参考使用,不构成任何决策建议或专业指导。分享/转载时请标明原文来源,同时请勿将内容用于商业售卖、虚假宣传等非学习用途哦~感谢您的理解与支持!