01月
18

仿b站返回顶部小火箭

发表于 • 字数统计 736 • 被 1661 人看爆

bilibili右下角返回顶部按钮样式源代码

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			.back-to-top {
				background-image: url("https://cdn.jsdelivr.net/gh/cetr/cdn@master/blog/img/space-to-top.png");
				width: 62px;
				height: 88px;
			}

			.back-to-top:hover {
				animation: to-top-fly .4s steps(1) infinite;
			}

			@keyframes to-top-fly {
				0% {
					background-position-x: -142.5px;
				}

				16.5% {
					background-position-x: -284.5px;
				}

				33% {
					background-position-x: -429.5px;
				}

				49.5% {
					background-position-x: -570.5px;
				}

				66% {
					background-position-x: -714.5px;
				}

				82.5% {
					background-position-x: -856.5px;
				}

				100% {
					background-position-x: 0px;
				}
			}
		</style>
	</head>
	<body>
		<div class="back-to-top"></div>
	</body>
</html>