本案例使用的是CSS3+jQuery的方式实现的。
少啰嗦上代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>流光字体</title>
<style>
.thanks{
height: 600px;
text-align: center;
line-height: 600px;
font-size: 230px;
font-weight: bold;
background: url("0.jpg");
background-origin: border-box;
/* 注意兼容性问题 */
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
</style>
</head>
<body>
<div class="thanks">
感谢关注
</div>
</body>
<script src="https://cdn.jsdelivr.net/npm/jquery@1.12.4/dist/jquery.min.js"></script>
<script>
function ft(){
$('.thanks').animate({backgroundPositionX:"0%",backgroundPositionY:"100%"},2000);
$('.thanks').animate({backgroundPositionX:"0%",backgroundPositionY:"0%"},2000);
}
ft();
setInterval(()=>{
ft();
},1);
</script>
</html>
效果还是不错的
流光字体效果
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
