<!DOCTYPE html>
<html>
<head>
<title>CSS3 Example1</title>
<meta charset="utf-8">
<meta http-equiv="Content-type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<style type="text/css">
@-webkit-keyframes starPulse{
from{opacity: 1;}/*透明度*/
to{opacity: 0.2;}
}
@-moz-keyframes starPulse{
from{opacity: 1;}/*透明度*/
to{opacity: 0.2;}
}
@-o-keyframes starPulse{
from{opacity: 1;}/*透明度*/
to{opacity: 0.2;}
}
@keyframes starPulse{
from{opacity: 1;}/*透明度*/
to{opacity: 0.2;}
}
@-webkit-keyframes sunfire{
from{
-webkit-box-shadow:0 0 70px #f5c91a;
-moz-box-shadow:0 0 70px #f5c91a
-o-box-shadow:0 0 70px #f5c91a
box-shadow:0 0 70px #f5c91a
}
to{
-webkit-box-shadow:0 0 120px #f5c91a;
-moz-box-shadow:0 0 120px #f5c91a
-o-box-shadow:0 0 120px #f5c91a
box-shadow:0 0 120px #f5c91a
}
}
@-moz-keyframes sunfire{
from{
-webkit-box-shadow:0 0 70px #f5c91a;
-moz-box-shadow:0 0 70px #f5c91a
-o-box-shadow:0 0 70px #f5c91a
box-shadow:0 0 70px #f5c91a
}
to{
-webkit-box-shadow:0 0 120px #f5c91a;
-moz-box-shadow:0 0 120px #f5c91a
-o-box-shadow:0 0 120px #f5c91a
box-shadow:0 0 120px #f5c91a
}
}
@-o-keyframes sunfire{
from{
-webkit-box-shadow:0 0 70px #f5c91a;
-moz-box-shadow:0 0 70px #f5c91a
-o-box-shadow:0 0 70px #f5c91a
box-shadow:0 0 70px #f5c91a
}
to{
-webkit-box-shadow:0 0 120px #f5c91a;
-moz-box-shadow:0 0 120px #f5c91a
-o-box-shadow:0 0 120px #f5c91a
box-shadow:0 0 120px #f5c91a
}
}
@keyframes sunfire{
from{
-webkit-box-shadow:0 0 70px #f5c91a;
-moz-box-shadow:0 0 70px #f5c91a
-o-box-shadow:0 0 70px #f5c91a
box-shadow:0 0 70px #f5c91a
}
to{
-webkit-box-shadow:0 0 120px #f5c91a;
-moz-box-shadow:0 0 120px #f5c91a
-o-box-shadow:0 0 120px #f5c91a
box-shadow:0 0 120px #f5c91a
}
}
@-webkit-keyframes rotate{
from{transform: rotate(0);}
to{transform: rotate(360deg);}
}
@-moz-keyframes rotate{
from{transform: rotate(0);}
to{transform: rotate(360deg);}
}
@-o-keyframes rotate{
from{transition: rotate(0);}
to{transform: rotate(360deg);}
}
@keyframes rotate{
from{transform: rotate(0);}
to{transform: rotate(360deg);}
}
@-webkit-keyframes opposite-rotate{
from{transform: rotate(0);}
to{transform: rotate(-360deg);}
}
@-moz-keyframes opposite-rotate{
from{transform: rotate(0);}
to{transform: rotate(-360deg);}
}
@-o-keyframes opposite-rotate{
from{transition: rotate(0);}
to{transform: rotate(-360deg);}
}
@keyframes opposite-rotate{
from{transform: rotate(0);}
to{transform: rotate(-360deg);}
}
html,body{
width: 100%;
height: 100%;
}
#universe{
background: black;
background: -webkit-radial-gradient(#555,#000);
background: -moz-radial-gradient(#555,#000);
background: -o-radial-gradient(#555,#000);
background: radial-gradient(#555,#000);
}
#stars{
width: 100%;
height: 100%;
background: url("Image/stars.png");
background-size: cover;
position: relative;
z-index: 2;
-webkit-animation:starPulse 2s infinite alternate;
-moz-animation:starPulse 2s infinite alternate;
-o-animation:starPulse 2s infinite alternate;
animation:starPulse 2s infinite alternate;
}
#sun{
height: 200px;
width: 200px;
background: orange;
background: -webkit-radial-gradient(#f5c313,#ec7e08);
background: -moz-radial-gradient(#f5c313,#ec7e08);
background: -o-radial-gradient(#f5c313,#ec7e08);
background: radial-gradient(#f5c313,#ec7e08);
position: absolute;
z-index: 3;
top: 50%;
left: 50%;
-webkit-border-radius: 100px;
-moz-border-radius: 100px;
-o-border-radius: 100px;
border-radius: 100px;
margin-top: -100px;
margin-left: -100px;
-webkit-box-shadow: 0 0 70px #f5c91a;
-moz-box-shadow: 0 0 70px #f5c91a;
-o-box-shadow: 0 0 70px #f5c91a;
box-shadow: 0 0 70px #f5c91a;
-webkit-animation:sunfire 1s infinite alternate;
-moz-animation:sunfire 1s infinite alternate;
-o-animation:sunfire 1s infinite alternate;
animation:sunfire 1s infinite alternate;
}
#earth-orbit{
/*border:solid 1px red;*/
position: absolute;
height: 700px;
width: 600px;
top: 50%;
left: 50%;
margin-top: -350px;
margin-left: -300px;
z-index: 4;
-webkit-border-radius: 50%;
-moz-border-radius: 50%;
-o-border-radius: 50%;
border-radius: 50%;
-webkit-animation:rotate 30s linear infinite;
-moz-animation:rotate 30s linear infinite;
-o-animation:rotate 30s linear infinite;
animation:rotate 30s linear infinite;
}
#earth{
position: absolute;
top: 50%;
margin-left: -40px;
margin-top: -40px;
-webkit-animation:rotate 8s linear infinite;
-moz-animation:rotate 8s linear infinite;
-o-animation:rotate 8s linear infinite;
animation:rotate 8s linear infinite;
}
#moon-orbit{
/*border:solid 1px red;*/
height: 120px;
width: 120px;
position: absolute;
z-index: 5;
top: 50%;
margin-top: -60px;
margin-left: -60px;
-webkit-border-radius: 50%;
-moz-border-radius: 50%;
-o-border-radius: 50%;
border-radius: 50%;
-webkit-animation:opposite-rotate 7s linear infinite;
-moz-animation:opposite-rotate 7s linear infinite;
-o-animation:opposite-rotate 7s linear infinite;
animation:opposite-rotate 7s linear infinite;
}
#moon{
width: 30px;
height: 30px;
background: gray;
background: -webkit-radial-gradient(#ddd,#888);
background: -moz-radial-gradient(#ddd,#888);
background: -o-radial-gradient(#ddd,#888);
background: radial-gradient(#ddd,#888);
-webkit-border-radius: 50%;
-moz-border-radius: 50%;
-o-border-radius: 50%;
border-radius: 50%;
}
</style>
</head>
<body id="universe">
<div id="stars"></div>
<div id="sun"></div>
<div id="earth-orbit">
<img id="earth" src="Image/earth.png" width="80px" height="80px">
<div id="moon-orbit">
<div id="moon"></div>
</div>
</div>
</body>
</html
留言列表
Impression (1)
