<!doctype html>
<html>
	<head>
		<meta charset="utf-8">
		<title>404页面</title>
		<link type="text/css" href="../../../404/css/style.css" rel="stylesheet" />

	</head>
	<body>

		<script src="../../../404/js/gsap.min.js"></script>

		<div class="container">
			<h1 class="first-four">4</h1>
			<div class="cog-wheel1">
				<div class="cog1">
					<div class="top"></div>
					<div class="down"></div>
					<div class="left-top"></div>
					<div class="left-down"></div>
					<div class="right-top"></div>
					<div class="right-down"></div>
					<div class="left"></div>
					<div class="right"></div>
				</div>
			</div>

			<div class="cog-wheel2">
				<div class="cog2">
					<div class="top"></div>
					<div class="down"></div>
					<div class="left-top"></div>
					<div class="left-down"></div>
					<div class="right-top"></div>
					<div class="right-down"></div>
					<div class="left"></div>
					<div class="right"></div>
				</div>
			</div>
			<h1 class="second-four">4</h1>
			<a href="/" class="wrong-para">返回首页</a>
		</div>

		<script>
			let t1 = gsap.timeline();
			let t2 = gsap.timeline();
			let t3 = gsap.timeline();

			t1.to(".cog1", {
				transformOrigin: "50% 50%",
				rotation: "+=360",
				repeat: -1,
				ease: Linear.easeNone,
				duration: 8
			});

			t2.to(".cog2", {
				transformOrigin: "50% 50%",
				rotation: "-=360",
				repeat: -1,
				ease: Linear.easeNone,
				duration: 8
			});

			t3.fromTo(".wrong-para", {
				opacity: 0
			}, {
				opacity: 1,
				duration: 1,
				stagger: {
					repeat: -1,
					yoyo: true
				}
			});
		</script>

	</body>
</html>
