建立一个HTML文件
以下是代码:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<link type="text/css"rel="stylesheet"href="css/task1.css" />
</head>
<body>
<div id="title">
太阳系八大行星
<p>
<button onclick="addlight()">添加灯光</button>
<button onclick="removelight()">关闭灯光</button>
</p>
</div>
<div id="box">
<img src="img/灯光.png"id="pic"style="display:none ;"/>
<div id="sun"></div>
<div id="shuigd">
<div id="shui"></div>
</div>
<div id="jingd">
<div id="jin"></div>
</div>
<div id="earthgd">
<div id="earth"></div>
</div>
<div id="huogd">
<div id="huo"></div>
</div>
<div id="mugd">
<div id="mu"></div>
</div>
<div id="tugd">
<div id="tu"></div>
</div>
<div id="tianwanggd">
<div id="tianwang"></div>
</div>
<div id="haiwanggd">
<div id="haiwang"></div>
</div>
</div>
<script type="text/javascript">
var pic=document.getElementById("pic");
function addtion|(){
pic.style.display="block";
pic.classList.add("light");
}
function removelight(){
pic.style.display="none";
pic.classList.remove("light");
}
</script>
</body>
</html>
图片可以在网上下载并插入。
在css文件中建立一个css文档
以下是代码:
*{
padding: 0;
margin: 0;
}
body{
background: url(../img/bj.jpg);
}
#title{
text-align: center;
color: white;
font-size: 30px;
font-weight: bold;
letter-spacing: 20px;
}
button{
width: 100px;
height: 50px;
font-size: 20px;
font-weight: bold;
margin: 20px auto;
border-radius: 20px;
cursor: pointer;
}
#box{
width: 1600px;
height: auto;
margin: 20px auto;
position: relative;
transform-style: preserve-3d;
transform: rotateX(-60deg)rotateY(5deg);
}
#sun{
width: 200px;
height: 200px;
position: absolute;
left: 700px;
top: 700px;
border-radius: 50%;
background-image: url(../img/taiyang.png);
background-repeat: no-repeat;
background-size: 100%;
animation: rot 20s linear infinite;
}
#shuigd{
width: 250px;
height: 250px;
left: 675px;
top: 675px;
position: absolute;
border: 2px dashed #00FFFF;
border-radius: 50%;
animation: rot 3s linear infinite;
}
#shui{
width: 40px;
height: 40px;
margin-left: -20px;
margin-top: 105px;
border-radius: 50%;
background-image: url(../img/水星.png);
background-repeat: no-repeat;
background-size: 100%;
}
#jingd{
width: 400px;
height: 400px;
left: 600px;
top: 600px;
position: absolute;
border: 2px dashed salmon;
border-radius: 50%;
animation: rot 2.5s linear infinite;
}
#jin{
width: 60px;
height: 60px;
margin-left: -30px;
margin-top: 170px;
border-radius: 50%;
background-image: url(../img/金星.png);
background-repeat: no-repeat;
background-size: 100%;
}
#earthgd{
width: 600px;
height: 600px;
left: 500px;
top: 500px;
position: absolute;
border: 2px dashed greenyellow;
border-radius: 50%;
animation: rot 8s linear infinite;
}
#earth{
width: 80px;
height: 80px;
margin-left: -30px;
margin-top: 270px;
border-radius: 50%;
background-image: url(../img/earth.png);
background-repeat: no-repeat;
background-size: 100%;
animation: rot 2s linear infinite;
}
#huogd{
width: 800px;
height: 800px;
left: 400px;
top: 400px;
position: absolute;
border: 2px dashed white;
border-radius: 50%;
animation: rot 5s linear infinite;
}
#huo{
width: 100px;
height: 100px;
margin-left: -30px;
margin-top: 370px;
border-radius: 50%;
background-image: url(../img/火星.png);
background-repeat: no-repeat;
background-size: 100%;
}
#mugd{
width: 1000px;
height: 1000px;
left: 300px;
top: 300px;
position: absolute;
border: 2px dashed palegreen;
border-radius: 50%;
animation: rot 10s linear infinite;
}
#mu{
width: 120px;
height: 120px;
margin-left: -40px;
margin-top: 470px;
border-radius: 50%;
background-image: url(../img/木星.png);
background-repeat: no-repeat;
background-size: 100%;
}
#tugd{
width: 1200px;
height: 1200px;
left: 200px;
top: 200px;
position: absolute;
border: 2px dashed darkblue;
border-radius: 50%;
animation: rot 6s linear infinite;
}
#tu{
width: 160px;
height: 160px;
margin-left: -45px;
margin-top: 570px;
border-radius: 50%;
background-image: url(../img/土星.png);
background-repeat: no-repeat;
background-size: 100%;
}
#tianwanggd{
width: 1400px;
height: 1400px;
left: 100px;
top: 100px;
position: absolute;
border: 2px dashed peru;
border-radius: 50%;
animation: rot 12s linear infinite;
}
#tianwang{
width: 120px;
height: 120px;
margin-left: -40px;
margin-top:670px;
border-radius: 50%;
background-image: url(../img/土王星.png);
background-repeat: no-repeat;
background-size: 100%;
}
#haiwanggd{
width: 1600px;
height: 1600px;
left: 0px;
top: 0px;
position: absolute;
border: 2px dashed lightblue;
border-radius: 50%;
animation: rot 7.5s linear infinite;
}
#haiwang{
width:120px;
height:120px;
margin-left: -45px;
margin-top:765px;
border-radius: 50%;
background-image: url(../img/海王星.png);
background-repeat: no-repeat;
background-size: 100%;
}
@keyframes rot{
0%{transform: rotate(0deg);}
50%{transform: rotate(180deg);}
100%{transform: rotate(360deg);}
}
.light{
width: 1600px;
height: auto;
position: absolute;
left: 0;
top: 0;
opacity: 0.4;
background-image:url(../img/灯光.png) ;
background-repeat: no-repeat;
background-size: 120%;
background-position-x: -200px;
background-position-y: -20px;
}
如jingd后面有gd的为轨道,没有gd的为星球。