<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>自转</title> <style> *{ margin:0; padding:0; } .ab{ width:0px; height:0px; background: #000; position: absolute; } .move{ position: absolute; width:80px; height:80px; background: #009FCC; font-size: 20px; text-align:center; border:1.5px solid #000; border-radius:40px; color:#FFFFFF; } .move2{ position: absolute; width:80px; height:80px; background: #FF0000; font-size: 20px; text-align:center; border:1.5px solid #000; border-radius:40px; color:#FFFFFF; } .move3{ position: absolute; width:80px; height:80px; background: #DDAA00; font-size: 20px; text-align:center; border:1.5px solid #000; border-radius:40px; color:#FFFFFF; } .move4{ position: absolute; width:80px; height:80px; background: #227700; font-size: 20px; text-align:center; border:1.5px solid #000; border-radius:40px; color:#FFFFFF; } #img{ /*相对定位*/ position:relative; transform:translate(630px,220px); background: #AC07EB; border-radius:60px; width:120px; height:120px; font-size: 20px; text-align:center; border:1.5px solid #0EC0CF; } .earth{ background: url(espaco.jpg) repeat-x 0 0; /* 背景图片在水平方向复制*/ /*下面的属性可使地球位于浏览器窗口垂直水平居中国*/ height: 120px; left: 50%; margin: 260px 620px; position: inherit; top: 50%; width: 120px; text-align:center; color: #FF0509; font-size:24px; font-weight: bold; border: 1px solid rgba(26,18,101,0.3); border-radius: 60px; box-shadow: -8px 0 25px rgba(256,256,256,0.3), -1px -2px 14px rgba(256,256,256,0.5) inset; -webkit-animation:loop 20s linear infinite; } .earth:before{ content:""; border-radius: 60px; margin: 260px 620px; box-shadow: -50px -2px 26px rgba(0,0,0,0.7) inset; left: 0; position: inherit; top: 0; height: 120px; width: 120px; } @-webkit-keyframes loop { from { background-position: 0px 0%; } to { background-position: -900px 0%;} } .earth1{ background: url(espaco.jpg) repeat-x 0 0; /* 背景图片在水平方向复制*/ /*下面的属性可使地球位于浏览器窗口垂直水平居中国*/ height: 120px; left: 50%; margin: -100px 0 0 -100px; position: absolute; top: 50%; width: 120px; text-align:center; color: #FF0509; font-size:18px; font-weight: bold; border: 1px solid rgba(26,18,101,0.3); border-radius: 100px; box-shadow: -8px 0 25px rgba(256,256,256,0.3), -1px -2px 14px rgba(256,256,256,0.5) inset; -webkit-animation:loop 20s linear infinite; } .earth2:before{ content: ""; border-radius: 100px; box-shadow: -36px -6px 26px rgba(0,0,0,0.7) inset; left: 0; position: absolute; top: 0; height: 120px; width: 120px; } @-webkit-keyframes loop { from { background-position: 0px 0%; } to { background-position: -900px 0%;} } .earth2{ background: url(espaco.jpg) repeat-x 0 0; /* 背景图片在水平方向复制*/ /*下面的属性可使地球位于浏览器窗口垂直水平居中国*/ height: 120px; left: 50%; margin: -100px 0 0 -100px; position: absolute; top: 50%; width: 120px; text-align:center; color: #FF0509; font-size:18px; font-weight: bold; border: 1px solid rgba(26,18,101,0.3); border-radius: 100px; box-shadow: -8px 0 25px rgba(256,256,256,0.3), -1px -2px 14px rgba(256,256,256,0.5) inset; -webkit-animation:loop 20s linear infinite; } .earth2:before{ content: ""; border-radius: 100px; box-shadow: -36px -6px 26px rgba(0,0,0,0.7) inset; left: 0; position: absolute; top: 0; height: 120px; width: 120px; } @-webkit-keyframes loop { from { background-position: 0px 0%; } to { background-position: -900px 0%;} } .earth3{ background: url(espaco.jpg) repeat-x 0 0; /* 背景图片在水平方向复制*/ /*下面的属性可使地球位于浏览器窗口垂直水平居中国*/ height: 120px; left: 50%; margin: -100px 0 0 -100px; position: absolute; top: 50%; width: 120px; text-align:center; color: #FF0509; font-size:18px; font-weight: bold; border: 1px solid rgba(26,18,101,0.3); border-radius: 100px; box-shadow: -8px 0 25px rgba(256,256,256,0.3), -1px -2px 14px rgba(256,256,256,0.5) inset; -webkit-animation:loop 20s linear infinite; } .earth3:before{ content: ""; border-radius: 100px; box-shadow: -36px -6px 26px rgba(0,0,0,0.7) inset; left: 0; position: absolute; top: 0; height: 120px; width: 120px; } @-webkit-keyframes loop { from { background-position: 0px 0%; } to { background-position: -900px 0%;} } .earth4{ background: url(espaco.jpg) repeat-x 0 0; /* 背景图片在水平方向复制*/ /*下面的属性可使地球位于浏览器窗口垂直水平居中国*/ height: 120px; left: 50%; margin: -100px 0 0 -100px; position: absolute; top: 50%; width: 120px; text-align:center; color: #FF0509; font-size:18px; font-weight: bold; border: 1px solid rgba(26,18,101,0.3); border-radius: 100px; box-shadow: -8px 0 25px rgba(256,256,256,0.3), -1px -2px 14px rgba(256,256,256,0.5) inset; -webkit-animation:loop 20s linear infinite; } .earth4:hover, .earth1:hover, .earth2:hover, .earth3:hover { -webkit-animation:loop 0s linear infinite; } .earth4:before{ content: ""; border-radius: 100px; box-shadow: -36px -6px 26px rgba(0,0,0,0.7) inset; left: 0; position: absolute; top: 0; height: 120px; width: 120px; } </style> </head> <body> <div class="earth"> <p>寰球</p> <p>金融</p> </div> <div class="earth1"> <p> </p> <p>基金</p> <p>管理</p> </div> <div class="earth2"> <p> </p> <p>投资</p> <p>银行</p> </div> <div class="earth3"> <p> </p> <p>全球</p> <p>交易</p> </div> <div class="earth4"> <p> </p> <p>战略</p> <p>智库</p> </div> </body> <script type="text/javascript"> var timer1, timer2, timer3, timer4; var z = 0, z2 = 90, z3 = 180, z4 = 280; var du = 360, du2 = 360, du3 = 360, du4 = 360; var arr = [], arr2 = [], arr3 = [], arr4 = []; var divs = document.getElementsByTagName("div"); for (var i = 0; i < divs.length; i++) { divs[i].onmouseover = function () { clearInterval(timer4); clearInterval(timer3); clearInterval(timer2); clearInterval(timer1); // divs[i].className = ""; // var style = document.getElementById("dynamic"); // style.innerHTML = '@-webkit-keyframes loop{ from { background-position: 0px 0%; } to {background-position: 0px 0%;} }'; // divs[1].style.transition = "-webkit-transform: loop 0s linear infinite"; } //双击小球小事 divs[i].ondblclick = function () { //此处写你要跳转到的代码 document.body.innerHTML = ""; document.body.innerHTML = "<center><h2>来呀来呀，小帅哥快来玩啊<h2></center>"; } divs[i].onmouseout = function () { var style = document.getElementById("dynamic"); //style.innerHTML = '@-webkit-keyframes loop {from { background-position: 0px 0%; }to { background-position: -900px 0%;}}'; timer1 = setInterval(function () { if (z >= du) z = 0; divs[1].style.cssText = "left:" + arr[z][0] + "px;top:" + arr[z][1] + "px;"; z++; }, 40) timer2 = setInterval(function () { if (z2 >= du2) z2 = 0; divs[2].style.cssText = "left:" + arr2[z2][0] + "px;top:" + arr2[z2][1] + "px;"; z2++; }, 40) timer3 = setInterval(function () { if (z3 >= du3) z3 = 0; divs[3].style.cssText = "left:" + arr3[z3][0] + "px;top:" + arr3[z3][1] + "px;"; z3++; }, 40) timer4 = setInterval(function () { if (z4 >= du4) z4 = 0; divs[4].style.cssText = "left:" + arr4[z4][0] + "px;top:" + arr4[z4][1] + "px;"; z4++; }, 40) } } (function () { var x = 740, y = 380, a = 360, b = 200; var go = document.querySelector(".earth1"); for (var i = 0; i <= du; i++) { var divs = document.createElement("div") hudu = (Math.PI / 180) * i, x1 = a * Math.sin(hudu) + x, y1 = y - (b * Math.cos(hudu)); arr[i] = []; arr[i][0] = x1 - 2; arr[i][1] = y1 - 2; divs.className = "ab"; divs.style.cssText = "left:" + x1 + "px;top:" + y1 + "px;" document.body.appendChild(divs); }; clearInterval(timer1); timer1 = setInterval(function () { if (z >= du) z = 0; go.style.cssText = "left:" + arr[z][0] + "px;top:" + arr[z][1] + "px;"; z++; }, 40); //绑定停止转动事件 })() </script> <script> (function () { var x = 740, y = 380, a = 360, b = 200; var go = document.querySelector(".earth2"); for (var i = 0; i < du2; i++) { var divs = document.createElement("div") hudu = (Math.PI / 180) * i, x1 = a * Math.sin(hudu) + x, y1 = y - (b * Math.cos(hudu)); arr2[i] = []; arr2[i][0] = x1 - 3; arr2[i][1] = y1 - 3; divs.className = "ab"; divs.style.cssText = "left:" + x1 + "px;top:" + y1 + "px;" document.body.appendChild(divs); }; clearInterval(timer2); timer2 = setInterval(function () { if (z2 >= du2) z2 = 0; go.style.cssText = "left:" + arr2[z2][0] + "px;top:" + arr2[z2][1] + "px;"; z2++; }, 40) })() </script> <script> (function () { var x = 740, y = 380, a = 360, b = 200; var go = document.querySelector(".earth3"); for (var i = 0; i < du3; i++) { var divs = document.createElement("div") hudu = (Math.PI / 180) * i, x1 = a * Math.sin(hudu) + x, y1 = y - (b * Math.cos(hudu)); arr3[i] = []; arr3[i][0] = x1 - 2; arr3[i][1] = y1 - 2; divs.className = "ab"; divs.style.cssText = "left:" + x1 + "px;top:" + y1 + "px;" document.body.appendChild(divs); }; clearInterval(timer3); timer3 = setInterval(function () { if (z3 >= du3) z3 = 0; go.style.cssText = "left:" + arr3[z3][0] + "px;top:" + arr3[z3][1] + "px;"; z3++; }, 40) })() </script> <script> (function () { var x = 740, y = 380, a = 360, b = 200; var go = document.querySelector(".earth4"); for (var i = 0; i < du4; i++) { var divs = document.createElement("div") hudu = (Math.PI / 180) * i, x1 = a * Math.sin(hudu) + x, y1 = y - (b * Math.cos(hudu)); arr4[i] = []; arr4[i][0] = x1 - 2; arr4[i][1] = y1 - 2; divs.className = "ab"; divs.style.cssText = "left:" + x1 + "px;top:" + y1 + "px;" document.body.appendChild(divs); }; clearInterval(timer4); timer4 = setInterval(function () { if (z4 >= du4) z4 = 0; go.style.cssText = "left:" + arr4[z4][0] + "px;top:" + arr4[z4][1] + "px;"; z4++; }, 40) })() </script> </html>