太阳系八大行星围绕太阳公转

最新推荐文章于 2024-08-18 09:18:56 发布

执心幻恋

最新推荐文章于 2024-08-18 09:18:56 发布

阅读量211

点赞数 2

文章标签： html5 css javascript

本文链接：https://blog.csdn.net/2301_77335001/article/details/137239935

版权

本文介绍了如何使用HTML和CSS创建一个简单的天文系统模型，包括太阳、行星和轨道，以及使用JavaScript控制灯光显示和隐藏。CSS用于设计视觉效果和布局，而JavaScript则负责交互功能。

摘要由CSDN通过智能技术生成

建立一个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的为星球。