135 lines
3.3 KiB
HTML
135 lines
3.3 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>旋转地球</title>
|
|
|
|
|
|
<style>
|
|
body{ height:768px; overflow:hidden; background-color:#000}
|
|
#sun{ width:2000px; height:2000px; background-image:url(images/dc4.png); background-size:100% 100%; position:absolute; right:-1400px; top:-1000px;
|
|
border-radius:1000px;
|
|
box-shadow:0 0 200px #F30,
|
|
0 0 20px #F00,
|
|
0 0 10px #FF0,
|
|
0 0 200px #F30;
|
|
animation-name:bbb;
|
|
animation-duration:360s;
|
|
animation-iteration-count:infinite;
|
|
animation-timing-function:linear}
|
|
#box{
|
|
width:400px;
|
|
height:400px;
|
|
position:absolute;
|
|
top:300px;
|
|
left:300px;
|
|
border-radius:200px;
|
|
/*transform-style:preserve-3d;
|
|
transform:rotateX(70deg);*/
|
|
transform:rotate(-15deg);
|
|
overflow:hidden;
|
|
box-shadow:0 0 30px #00F,
|
|
0 0 30px #00F;
|
|
|
|
}
|
|
#shadow{
|
|
width:400px;
|
|
height:400px;
|
|
border-radius:200px;
|
|
position:absolute;
|
|
z-index:999;
|
|
box-shadow:0px 0 80px black inset,
|
|
60px 0 60px black inset;
|
|
}
|
|
#img{
|
|
width:2400px;
|
|
height:400px;
|
|
position:absolute;
|
|
left:-800px;
|
|
background-image:url(images/mapa.jpg);
|
|
border-radius:200px;
|
|
animation-name:aaa;
|
|
animation-duration:10s;
|
|
animation-iteration-count:infinite;
|
|
animation-timing-function:linear
|
|
|
|
}
|
|
#div1{
|
|
width:400px;
|
|
height:400px;
|
|
border-radius:200px;
|
|
position:absolute;
|
|
background:-webkit-gradient(radial,330 200,10,330 200,80,from(#FFF),to(blue));
|
|
opacity:0.3;
|
|
/*transform-style:preserve-3d;
|
|
transform:translateX(400px);*/
|
|
/*animation-name:aaa;
|
|
animation-duration:5s;
|
|
animation-iteration-count:infinite;
|
|
animation-timing-function:linear;*/
|
|
}
|
|
@keyframes ccc{
|
|
0%{
|
|
background-position:-80px 0px;
|
|
|
|
}
|
|
50%{
|
|
background-position:0px -80px;
|
|
|
|
}
|
|
100%{
|
|
background-position:-80px 0px;
|
|
|
|
}
|
|
}
|
|
@keyframes bbb{
|
|
0%{
|
|
transform:rotate(0deg);
|
|
}
|
|
100%{
|
|
transform:rotate(360deg);
|
|
}
|
|
}
|
|
@keyframes aaa{
|
|
0%{
|
|
left:-2000px;
|
|
}
|
|
100%{
|
|
left:-800px;
|
|
}
|
|
}
|
|
</style>
|
|
<script>
|
|
window.onload=function()
|
|
{
|
|
/*
|
|
var oDiv = document.getElementById("div1");
|
|
for(var i = 0;i<=180;i++)
|
|
{
|
|
var aImg = document.createElement("img");
|
|
|
|
aImg.src="cir.svg";
|
|
aImg.style.transformStyle="preserve-3d";
|
|
aImg.style.position="absolute";
|
|
aImg.style.transform="rotateX("+i+"deg)";
|
|
oDiv.appendChild(aImg);
|
|
}
|
|
*/
|
|
}
|
|
</script>
|
|
</head>
|
|
|
|
<body>
|
|
<div id="sun"></div>
|
|
<div id="box">
|
|
<div id="shadow"></div>
|
|
<div id="img"></div>
|
|
<div id="div1">
|
|
</div>
|
|
</div>
|
|
<div></div>
|
|
</body>
|
|
</html> |