master

分支 (1)

管理

管理

master

damnson
/
contact.html

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>contact me if not urgent</title>
	<style>
		body {
			background-color: rgb(60, 60, 70);
		}
		.box {
			width: 100%;
			height: 500px;
			padding-top: 100px;
		}
		.head {
			margin: 0 auto ;
			color: rgba(255,255,255,0.5);
			font-size: 30px;
			width: 200px;
			height: 50px;

		}
		.text {
			margin: 50px auto;
			width: 980px;
			animation: move 4s linear infinite alternate;
		}
		span {
			color: rgb(51, 51, 51);
			font-size: 80px;
			font-weight: 600;
			margin-left: 10px;
			transition: .5s;
			transition-delay: calc(var(--i)*.04s);
			cursor: default;

		}
		.box:hover span {
			color: white;
			text-shadow: 0 0 10px #fff,0 0 20px #fff,0 0 50px #fff,0 0 80px #fff;
		}

		@keyframes move {
			0% {
				transform: translateX(150px) translateY(80px) rotate(30deg);
			}
			50% {
				transform: translateX(0) translateY(40px) rotate(0);
			}
			100% {
				transform: translateX(-150px) translateY(0) rotate(-30deg);
				text-shadow: 0 0 10px #fff,0 0 20px #fff,0 0 50px #fff,0 0 80px #fff;
			}
		}
	</style>
</head>

<body>
	<div class="box">
		<div class="head">Wechat ID:</div>
		<div class="text">
			<span style="--i:1">r</span>
			<span style="--i:2">e</span>
			<span style="--i:3">a</span>
			<span style="--i:4">l</span>
			<span style="--i:5">_</span>
			<span style="--i:6">s</span>
			<span style="--i:7">u</span>
			<span style="--i:8">i</span>
			<span style="--i:9">c</span>
			<span style="--i:10">i</span>
			<span style="--i:11">d</span>
			<span style="--i:12">e</span>
			<span style="--i:13">b</span>
			<span style="--i:14">o</span>
			<span style="--i:15">y</span>
			<span style="--i:16">s</span>
		</div>
	</div>

</body>
</html>