<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>css3齿轮404错误提示代码 - 更多源码WW.96flw.COM</title>
<link type="text/css" href="css/style.css" rel="stylesheet" />
</head>
<body>
<script src="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>
<p class="wrong-para">Uh Oh! 找不到页面!</p>
</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>
<div style="text-align:center;margin:50px 0; font:normal 14px/24px 'MicroSoft YaHei';">
<p>适用浏览器：360、FireFox、Chrome、Opera、傲游、搜狗、世界之窗. 不支持Safari、IE8及以下浏览器。</p>
<p>更多源码：<a href="http://WW.96flw.COM/" target="_blank">尽在WW.96flw.COM</a></p>
</div>
</body>
</html>
