<!DOCTYPE html>
<html lang="zh-Hant-TW">
<head>
<title>地球軌跡練習</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1" />
<style type="text/css">
html{
height: 100%;
overflow: hidden;
}
#universe{
background:radial-gradient(#555,#000);
height: 100%;
}
#stars{
background-image: url(Image/stars.png);
height: 100%;
background-size: cover;
animation-name: starsFlash;
animation-duration: 3s;
animation-direction: alternate;
animation-iteration-count: infinite;
}
@keyframes starsFlash {
from{opacity: 1;}
to{opacity: 0.3;}
}
#sun{
width: 200px;
height: 200px;
background-color: orange;
position: absolute;
top: 50%;
left: 50%;
margin-top: -100px;
margin-left: -100px;
border-radius: 50%;
background: radial-gradient(#f5c313,#ec7e08);
box-shadow: 0 0 45px #f5c91a;
animation-name: sunLight;
animation-duration: 2s;
animation-direction: alternate;
animation-iteration-count: infinite;
}
@keyframes sunLight {
from{box-shadow: 0 0 45px #f5c91a;}
to{box-shadow: 0 0 100px #f5c91a;}
}
#earthOrbit {
height: 500px;
width: 500px;
/*border:1px solid red;*/
position: absolute;
top: 50%;
left: 50%;
margin-top: -250px;
margin-left: -250px;
border-radius: 50%;
animation-name: spin;
animation-duration: 30s;
animation-iteration-count: infinite;
animation-timing-function: linear;
}
@keyframes spin {
from{ transform: rotate(0deg); }
/*地球軌跡and地球自轉 變形: 選轉*/
to{transform: rotate(360deg);}
}
#earth {
position: relative;
top: 210px;
left: -40px;
animation-name: earthSpin;
animation-duration: 20s;
animation-iteration-count: infinite;
animation-timing-function: linear;
}
@keyframes earthSpin {
from{transform: rotate(0deg);}
to{transform: rotate(-360deg);}
}
#moonOrbit {
width: 150px;
height: 150px;
/*border: 1px solid red;*/
position: absolute;
top: 0px;
left: 0px;
margin-left: -75px;
margin-top: 170px;
border-radius: 50%;
animation-name: spin;
animation-duration: 20s;
animation-iteration-count: infinite;
animation-timing-function: linear;
}
#moon {
height: 30px;
width: 30px;
background-color: #555;
position: relative;
top: 55px;
left: -15px;
border-radius: 50%;
background:radial-gradient(#ddd,#888);
}
</style>
</head>
<body id="universe">
<div id="stars"></div>
<div id="sun"></div>
<div id="earthOrbit">
<img id="earth" src="Image/earth.png" alt="earth" width="80px;" height="80px;">
<div id="moonOrbit">
<div id="moon"></div>
</div>
</div>
</body>
</html>
留言列表
Impression (1)
