使用css3 实现太阳升起落下效果
<!DOCTYPE html>
<html style="overflow: hidden">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<style>
body
{
100%;
height: 100%;
background-image: url("img/pop.jpg");
}
div
{
50px;
height: 50px;
border-radius:100% ;
background: #FFE100;
position: relative;
top:700px;
left: -120px;
box-shadow: 0 0 20px #FA940A, 0 0 50px #FF0000;
-webkit-animation:movie 10s linear infinite;/*动画名称 播放时间 播放动画的方式 动画播放次数*/
}
@-webkit-keyframes movie {
0%{
margin-left: 192px;
margin-top: -140px;
}
10%{
margin-left: 384px;
margin-top: -280px;
}
20%{
margin-left: 576px;
margin-top: -420px;
}
30%{
margin-left: 768px;
margin-top: -560px;
}
40%{
margin-left: 950px;
margin-top: -650px;
}
50%{
margin-left: 1142px;
margin-top: -700px;
}
60%{
margin-left: 1334px;
margin-top: -650px;
}
70%{
margin-left: 1426px;
margin-top: -560px;
}
80%{
margin-left: 1618px;
margin-top: -420px;
}
90%{
margin-left: 1810px;
margin-top: -280px;
}
100%{
margin-left: 2020px;
margin-top: -140px;
}
}
</style>
</head>
<body>
<div></div>
</body>
</html>