直接上代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>夕阳落山图</title>
<style>
#xy{
width: 150px;
height: 150px;
background:radial-gradient(orange 30%, yellow);
box-shadow: 0px 0px 15px yellow inset;
border-radius: 50%;
}
</style>
</head>
<body>
<button onclick="dian()">点击开始落山</button>
<div id="xy"></div>
</body>
</html>
JavaScript 代码
<script>
var a,b;//创建两个变量,为太阳每次变化的位置
function bt() {
var sd= document.getElementById('xy');
if(a<=1800&&b<=900){ //太阳移动落下的最后位置
sd.style.marginLeft=a+"px"; //太阳移动的值
sd.style.marginTop=b+"px";
a=a+25; //每次移动的值
b=b+10;
}else{ //当太阳到达最后值时从新开始。
a=0;
b=0;
}
}
var t; //创建定时器
function dian() {
clearInterval(t);
t=setInterval('bt()',500);
}
</script>