原生js实现返回顶部动画和css字体渐变色

<!doctype html>
<html lang="en">
<head>
	<meta charset="UTF-8" />
	<title>css3渐变色字和返回顶部动画</title>
	<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
	<style type="text/css">
		p{
			font-size: 54px;
			font-weight: 700;
		}
		.jianbian-txt{
			color: transparent;
			background-image: linear-gradient(to left, #777dff 0px, #f154ff 200px, #f0357c 400px),linear-gradient(to right, #777dff 0px, #497ce2 200px, #37bdde 400px);
			background-size: 51% 100%;
			background-position: top left, top right;
			background-repeat: no-repeat;
			-webkit-background-clip: text;
		}
		#div1{
			height: 2200px;
			width: 100%;
			text-align: center;
			font-size: 54px;
			font-weight: 700;
		}
		#top{
			float: right;
			margin: auto 30px 30px auto;
		}
	</style>
	<script type="text/javascript">
		var returnTop = function(){
			var scrollToptimer = setInterval(function () {
			    console.log("定时循环回到顶部")
			    var top = document.body.scrollTop || document.documentElement.scrollTop;
			    var speed = top / 4;
			    if (document.body.scrollTop!=0) {
			        document.body.scrollTop -= speed;
			    }else {
			        document.documentElement.scrollTop -= speed;
			    }
			    if (top == 0) {
			        clearInterval(scrollToptimer);
			    }
			}, 30); 
		}
	</script>
	
</head>
<body>
	<p class="jianbian-txt">
		嘿 Siri,“早餐已经做好了”用英语怎么说?
	</p>
	<div id="div1" class="jianbian-txt">
		占位
	</div>
	<div onclick="returnTop()" id="top">^ 返回顶部</div>
</body>
</html>

暂无评论

发表评论