【CSS3】模拟太阳系八大行星运行轨迹

最新推荐文章于 2024-02-02 11:12:48 发布
最新推荐文章于 2024-02-02 11:12:48 发布
阅读量1.9k 收藏 9
点赞数 3
分类专栏： CSS3 html5+css3入门学习过程
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_45389633/article/details/107697716
版权

Tips

  1. Safari 浏览器需设置 -webkit- 前缀，Chrome 倒是都可以；
  2. -webkit- 的渐变角度进行需要换算： 90 - 原角度 = 需设角度：
    background-image: linear-gradient(135deg, red, yellow);
    background-image: -webkit-linear-gradient(-45deg, red, yellow);
  3. -webkit- 径向渐变属性为百分号，"shape size at position 不适用：
    background-image: radial-gradient(ellipse farthest-corner at 90% 90%, red, yellow);
    background-image: -webkit-radial-gradient(90% 90%, red, yellow);
  4. animation-play-state 可被 animation 属性合并简写，但在 -webkit-animation 中需单独定义：
    animation: rotate 1s infinite linear paused;
    -webkit-animation: rotate 500s infinite linear; -webkit-animation-play-state: paused;

文章目录

第一种实现：【改变元素中心（公转）】

Tips：
1. "行星" 与 "轨道" 分离，不共用元素标签；
2. 利用 transform-origin 改变元素中心位置，达到 "星体" 位于最左端，最右端连接圆心，来实现 "公转"；
3. transform-origin: x y; 中（"z" 此处不需要），x 的值为 "星体" 外边距的值即 margin-left，y 的值为 "星体" 的高的一半，即 height / 2；
【即 transform-origin: mragin-left height/2】

在这里插入图片描述

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8" />
	<title></title>
	<style type="text/css">
		body {
			padding: 0;
			margin: 0;
			background-color: black;
		}
		/* 拉伸 */
		.solar-system {
			position: absolute;
			min-width: 100%;
			min-height: 100%;
			/* 缩小 */
			transform: scale(0.75);
			-webkit-transform: scale(0.75);
		}
		/* 圆心 */
		.circle-center {
			position: absolute;
			width: 2px;
			height: 2px;
			border-radius: 50%;
			background-color: black;
			top: 50%;
			left: 50%;
			margin-top: -1px;
			margin-left: -1px;
			z-index: 1;
		}
		/* 太阳 */
		.sun {
			position: absolute;
			width: 80px;
			height: 80px;
			border-radius: 50%;
			background-color: rgba(223, 66, 5, 1);
			box-shadow: 0 0 10px 10px rgba(255, 104, 0, 0.9);
			top: 50%;
			left: 50%;
			margin-top: -40px;
			margin-left: -40px;
		}

		/* - - - - - - 八大行星 - - - - - - */
		/*  水星 */
		.mercury {
			position: absolute;
			width: 10px;
			height: 10px;
			border-radius: 50%;
			background-color: rgba(173, 120, 54, 1);
			top: 50%;
			left: 50%;
			margin-top: -5px;
			margin-left: -63px;
			z-index: 1;

			transform-origin: 63px 5px;
			animation: rotate 1.5s infinite linear paused;
			-webkit-transform-origin: 63px 5px;
			-webkit-animation: rotate 1.5s infinite linear;
			-webkit-animation-play-state: paused;
		}
		/* 金星 */
		.venus {
			position: absolute;
			width: 30px;
			height: 30px;
			border-radius: 50%;
			background-color: rgba(216, 189, 154, 1);
			top: 50%;
			left: 50%;
			margin-top: -15px;
			margin-left: -100px;
			z-index: 1;

			transform-origin: 100px 15px;
			animation: rotate 3s infinite linear paused;
			-webkit-transform-origin: 100px 15px;
			-webkit-animation: rotate 3s infinite linear;
			-webkit-animation-play-state: paused;
		}
		/* 地球 */
		.earth {
			position: absolute;
			width: 20px;
			height: 20px;
			border-radius: 50%;
			background-image: linear-gradient(135deg, rgb(12, 133, 0) 10%, rgb(0, 53, 255) 100%);
			background-image: -webkit-linear-gradient(-45deg, rgb(12, 133, 0) 10%, rgb(0, 53, 255) 100%);
			top: 50%;
			left: 50%;
			margin-top: -10px;
			margin-left: -139px;
			z-index: 1;

			transform-origin: 139px 10px;
			animation: rotate 6s infinite linear paused;
			-webkit-transform-origin: 139px 10px;
			-webkit-animation: rotate 6s infinite linear;
			-webkit-animation-play-state: paused;
		}
		/* 火星 */
		.mars {
			position: absolute;
			width: 14px;
			height: 14px;
			border-radius: 50%;
			background-color: rgba(152, 120, 94, 1);
			top: 50%;
			left: 50%;
			margin-top: -7px;
			margin-left: -182px;
			z-index: 1;

			transform-origin: 182px 7px;
			animation: rotate 11s infinite linear paused;
			-webkit-transform-origin: 182px 7px;
			-webkit-animation: rotate 11s infinite linear;
			-webkit-animation-play-state: paused;
		}
		/* 木星 */
		.jupiter {
			position: absolute;
			width: 50px;
			height: 50px;
			border-radius: 50%;
			background-image: repeating-linear-gradient(-25deg, rgb(162, 141, 117) 5%, rgb(247, 239, 210) 50%, rgb(162, 141, 117) 100%);
			background-image: -webkit-repeating-linear-gradient(115deg, rgb(162, 141, 117) 5%, rgb(247, 239, 210) 50%, rgb(162, 141, 117) 100%);
			top: 50%;
			left: 50%;
			margin-top: -25px;
			margin-left: -275px;
			z-index: 1;

			transform-origin: 275px 25px;
			animation: rotate 50s infinite linear paused;
			-webkit-transform-origin: 275px 25px;
			-webkit-animation: rotate 50s infinite linear;
			-webkit-animation-play-state: paused;
		}
		/* 土星 */
		.saturn {
			position: absolute;
			width: 34px;
			height: 34px;
			border-radius: 50%;
			background-image: repeating-linear-gradient(30deg, rgb(113, 72, 46) 5%, rgb(220, 180, 109) 50%, rgb(113, 72, 46) 100%);
			background-image: -webkit-repeating-linear-gradient(60deg, rgb(113, 72, 46) 5%, rgb(220, 180, 109) 50%, rgb(113, 72, 46) 100%);
			top: 50%;
			left: 50%;
			margin-top: -17px;
			margin-left: -329px;
			z-index: 1;

			transform-style: preserve-3d;
			transform-origin: 329px 18px;
			animation: rotate 180s infinite linear paused;
			-webkit-transform-style: preserve-3d;
			-webkit-transform-origin: 329px 18px;
			-webkit-animation: rotate 180s infinite linear;
			-webkit-animation-play-state: paused;
		}
		/* 土星环 */
		.saturn:after {
			position: absolute;
			content: '';
			width: 44px;
			height: 16px;
			border-radius: 50%;
			border: 8px solid rgba(136, 84, 30, 1);
			margin-top: 0px;
			margin-left: -13px;

			transform: rotateX(60deg) rotateY(30deg);
			-webkit-transform: rotateX(60deg) rotateY(30deg);
		}
		/* 天王星 */
		.uranus {
			position: absolute;
			width: 44px;
			height: 44px;
			border-radius: 50%;
			background-image: radial-gradient(ellipse farthest-corner at 90% 90%, rgb(170, 245, 246) 15%, rgb(1, 102, 121) 60%);
			background-image: -webkit-radial-gradient(90% 90%, rgb(170, 245, 246) 15%, rgb(1, 102, 121) 60%);
			top: 50%;
			left: 50%;
			margin-top: -22px;
			margin-left: -399px;
			z-index: 1;

			transform-style: preserve-3d;
			transform-origin: 399px 20px;
			animation: rotate 500s infinite linear paused;
			-webkit-transform-style: preserve-3d;
			-webkit-transform-origin: 399px 20px;
			-webkit-animation: rotate 500s infinite linear;
			-webkit-animation-play-state: paused;
		}
		/* 天王星环 */
		.uranus:after {
			position: absolute;
			content: '';
			width: 50px;
			height: 20px;
			border-radius: 50%;
			border: 10px solid rgba(255, 255, 255, 0.3);
			margin-top: 0px;
			margin-left: -13px;

			transform: rotateX(60deg) rotateY(-45deg);
			-webkit-transform: rotateX(60deg) rotateY(-45deg);
		}
		/* 海王星 */
		.neptune {
			position: absolute;
			width: 26px;
			height: 26px;
			border-radius: 50%;
			background-color: rgba(98, 134, 231, 1);
			top: 50%;
			left: 50%;
			margin-top: -13px;
			margin-left: -439px;
			z-index: 1;

			transform-origin: 439px 13px;
			animation: rotate 1000s infinite linear paused;
			-webkit-transform-origin: 439px 13px;
			-webkit-animation: rotate 1000s infinite linear;
			-webkit-animation-play-state: paused;
		}

		/* - - - - - - 行星轨道 - - - - - - */
		/* 水星轨道 */
		.mercury-orbit {
			position: absolute;
			width: 116px;
			height: 116px;
			border-radius: 50%;
			border: 1px solid rgba(255, 255, 255, 0.5);
			top: 50%;
			left: 50%;
			margin-top: -59px;
			margin-left: -59px;
		}
		/* 金星轨道 */
		.venus-orbit {
			position: absolute;
			width: 170px;
			height: 170px;
			border-radius: 50%;
			border: 1px solid rgba(255, 255, 255, 0.5);
			top: 50%;
			left: 50%;
			margin-top: -86px;
			margin-left: -86px;
		}
		/* 地球轨道 */
		.earth-orbit {
			position: absolute;
			width: 258px;
			height: 258px;
			border-radius: 50%;
			border: 1px solid rgba(255, 255, 255, 0.5);
			top: 50%;
			left: 50%;
			margin-top: -130px;
			margin-left: -130px;
		}
		/* 火星轨道 */
		.mars-orbit {
			position: absolute;
			width: 350px;
			height: 350px;
			border-radius: 50%;
			border: 1px solid rgba(255, 255, 255, 0.5);
			top: 50%;
			left: 50%;
			margin-top: -176px;
			margin-left: -176px;
		}
		/* 木星轨道 */
		.jupiter-orbit {
			position: absolute;
			width: 500px;
			height: 500px;
			border-radius: 50%;
			border: 1px solid rgba(255, 255, 255, 0.5);
			top: 50%;
			left: 50%;
			margin-top: -251px;
			margin-left: -251px;
		}
		/* 土星轨道 */
		.saturn-orbit {
			position: absolute;
			width: 624px;
			height: 624px;
			border-radius: 50%;
			border: 1px solid rgba(255, 255, 255, 0.5);
			top: 50%;
			left: 50%;
			margin-top: -313px;
			margin-left: -313px;
		}
		/* 天王星轨道 */
		.uranus-orbit {
			position: absolute;
			width: 754px;
			height: 754px;
			border-radius: 50%;
			border: 1px solid rgba(255, 255, 255, 0.5);
			top: 50%;
			left: 50%;
			margin-top: -378px;
			margin-left: -378px;
		}
		/* 海王星轨道 */
		.neptune-orbit {
			position: absolute;
			width: 852px;
			height: 852px;
			border-radius: 50%;
			border: 1px solid rgba(255, 255, 255, 0.5);
			top: 50%;
			left: 50%;
			margin-top: -427px;
			margin-left: -427px;
		}

		/* - - - - - - 控件 - - - - - - */
		.controls {
			position: absolute;
			margin-top: 50px;
			margin-left: 50px;
			z-index: 1;
		}
		.btn {
			padding: 10px 20px;
			outline: 0 none;
			border-radius: 15px;
			cursor: pointer;
		}
		/* 控制动画开始, 默认停止 */
		.on {
			animation-play-state: running !important;
			-webkit-animation-play-state: running !important;
		}

		/* - - - - - - 动画 - - - - - - */
		@keyframes rotate {
			0% {transform: rotate(0deg);}
			100% {transform: rotate(-360deg);}
		}
		@-webkit-keyframes rotate {
			0% {-webkit-transform: rotate(0deg);}
			100% {-webkit-transform: rotate(-360deg);}
		}
	</style>
	<script type="text/javascript">
		window.onload = function() {
			// 获取元素
			var toggle = document.getElementById('toggle');
				toggle.textContent = 'Strat';

			// 封闭空间与数组, 处理掉非元素节点
			var planets = [];
			;(function() {
				var nodes = document.getElementsByClassName('eight-planets')[0].childNodes;
				for (var i = 0; i < nodes.length; i++) {
					if (nodes[i].nodeType === 1) {
						// 填充数组
						planets.push(nodes[i]);
					}
				}
			})();

			// 类名变更函数
			function changeClass() {
				for (var i = 0; i < planets.length; i++) {
					var curClass = planets[i].getAttribute('class');

					var change = '';
					if (curClass.indexOf(' on') === -1) {
						change = curClass + ' on';
					} else {
						change = curClass.replace(' on', '');
					}

					planets[i].setAttribute('class', change);
				}
			}

			// 开始与暂停
			toggle.onclick = function() {
				if (this.textContent === 'Strat') {
					toggle.textContent = 'Stop';
				} else {
					toggle.textContent = 'Strat';
				}
				changeClass('on');
			}
		}
	</script>
</head>
<body>
	<div class="solar-system">
		<!-- 中心区 -->
		<div class="main-center">
			<!-- 参考圆心 -->
			<div class="circle-center"></div>
			<!-- 太阳 -->
			<div class="sun"></div>
		</div>

		<!-- 八大行星 -->
		<div class="eight-planets">
			<!-- 水星 -->
			<div class="mercury"></div>
			<!-- 金星 -->
			<div class="venus"></div>
			<!-- 地球 -->
			<div class="earth"></div>
			<!-- 火星 -->
			<div class="mars"></div>
			<!-- 木星 -->
			<div class="jupiter"></div>
			<!-- 土星 -->
			<div class="saturn"></div>
			<!-- 天王星 -->
			<div class="uranus"></div>
			<!-- 海王星 -->
			<div class="neptune"></div>
		</div>

		<!-- 行星轨道 -->
		<div class="planets-orbit">
			<!-- 水星轨道 -->
			<div class="mercury-orbit"></div>
			<!-- 金星轨道 -->
			<div class="venus-orbit"></div>
			<!-- 地球轨道 -->
			<div class="earth-orbit"></div>
			<!-- 火星轨道 -->
			<div class="mars-orbit"></div>
			<!-- 木星轨道 -->
			<div class="jupiter-orbit"></div>
			<!-- 土星轨道 -->
			<div class="saturn-orbit"></div>
			<!-- 天王星轨道 -->
			<div class="uranus-orbit"></div>
			<!-- 海王星轨道 -->
			<div class="neptune-orbit"></div>
		</div>
	</div>
	<!-- 控件 -->
	<div class="controls">
		<button class="btn" id="toggle"></button>
	</div>
</body>
</html>

第二种实现：【旋转元素自身（自转）】

Tips：
1. 将所有元素于某一点居中，"行星" 位于 "轨道" 的边部，实则是 "轨道" 自转，带动 "行星" 运动，造成 "公转" 效果；
2. 将 "星体" 设置位于 "轨道" 边部中间位置，此时 "星体" 距离 "圆心" 的距离，即为 "公转" 半径；
3. 是最简单最省事的方法，但如此的话，在旋转过程中，元素的角会撑开父元素（实际面积还是矩形）；

在这里插入图片描述

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8" />
	<title></title>
	<style type="text/css">
		body {
			padding: 0;
			margin: 0;
			background-color: black;
		}
		/* 拉伸 */
		.solar-system {
			position: absolute;
			min-width: 100%;
			min-height: 100%;
			/* 缩小 */
			transform: scale(0.75);
			-webkit-transform: scale(0.75);
		}
		/* 太阳 */
		.sun {
			position: absolute;
			width: 80px;
			height: 80px;
			border-radius: 50%;
			background-color: rgba(223, 66, 5, 1);
			box-shadow: 0 0 10px 10px rgba(255, 104, 0, 0.9);
			top: 50%;
			left: 50%;
			margin-top: -40px;
			margin-left: -40px;
		}

		/* - - - - - - 八大行星 - - - - - - */
		/* 水星轨道 */
		.mercury {
			position: absolute;
			width: 116px;
			height: 116px;
			border-radius: 50%;
			border: 1px solid rgba(255, 255, 255, 0.5);
			top: 50%;
			left: 50%;
			margin-top: -59px;
			margin-left: -59px;

			animation: rotate 1.5s infinite linear paused;
			-webkit-animation: rotate 1.5s infinite linear;
			-webkit-animation-play-state: paused;
		}
		/* 水星 */
		.mercury:after {
			position: absolute;
			content: '';
			width: 10px;
			height: 10px;
			border-radius: 50%;
			background-color: rgba(173, 120, 54, 1);
			margin-top: 53px;
			margin-left: -5px;
		}
		/* 金星轨道 */
		.venus {
			position: absolute;
			width: 170px;
			height: 170px;
			border-radius: 50%;
			border: 1px solid rgba(255, 255, 255, 0.5);
			top: 50%;
			left: 50%;
			margin-top: -86px;
			margin-left: -86px;

			animation: rotate 3s infinite linear paused;
			-webkit-animation: rotate 3s infinite linear;
			-webkit-animation-play-state: paused;
		}
		/* 金星 */
		.venus:after {
			position: absolute;
			content: '';
			width: 30px;
			height: 30px;
			border-radius: 50%;
			background-color: rgba(216, 189, 154, 1);
			margin-top: 70px;
			margin-left: -15px;
		}
		/* 地球轨道 */
		.earth {
			position: absolute;
			width: 258px;
			height: 258px;
			border-radius: 50%;
			border: 1px solid rgba(255, 255, 255, 0.5);
			top: 50%;
			left: 50%;
			margin-top: -130px;
			margin-left: -130px;

			animation: rotate 6s infinite linear paused;
			-webkit-animation: rotate 6s infinite linear;
			-webkit-animation-play-state: paused;
		}
		/* 地球 */
		.earth:after {
			position: absolute;
			content: '';
			width: 20px;
			height: 20px;
			border-radius: 50%;
			background-image: linear-gradient(135deg, rgb(12, 133, 0) 10%, rgb(0, 53, 255) 100%);
			background-image: -webkit-linear-gradient(-45deg, rgb(12, 133, 0) 10%, rgb(0, 53, 255) 100%);
			margin-top: 119px;
			margin-left: -10px;
		}
		/* 火星轨道 */
		.mars {
			position: absolute;
			width: 350px;
			height: 350px;
			border-radius: 50%;
			border: 1px solid rgba(255, 255, 255, 0.5);
			top: 50%;
			left: 50%;
			margin-top: -176px;
			margin-left: -176px;

			animation: rotate 11s infinite linear paused;
			-webkit-animation: rotate 11s infinite linear;
			-webkit-animation-play-state: paused;
		}
		/* 火星 */
		.mars:after {
			position: absolute;
			content: '';
			width: 14px;
			height: 14px;
			border-radius: 50%;
			background-color: rgba(152, 120, 94, 1);
			margin-top: 168px;
			margin-left: -7px;
		}
		/* 木星轨道 */
		.jupiter {
			position: absolute;
			width: 500px;
			height: 500px;
			border-radius: 50%;
			border: 1px solid rgba(255, 255, 255, 0.5);
			top: 50%;
			left: 50%;
			margin-top: -251px;
			margin-left: -251px;

			animation: rotate 50s infinite linear paused;
			-webkit-animation: rotate 50s infinite linear;
			-webkit-animation-play-state: paused;
		}
		/* 木星 */
		.jupiter:after {
			position: absolute;
			content: '';
			width: 50px;
			height: 50px;
			border-radius: 50%;
			background-image: repeating-linear-gradient(-25deg, rgb(162, 141, 117) 5%, rgb(247, 239, 210) 50%, rgb(162, 141, 117) 100%);
			background-image: -webkit-repeating-linear-gradient(115deg, rgb(162, 141, 117) 5%, rgb(247, 239, 210) 50%, rgb(162, 141, 117) 100%);
			margin-top: 225px;
			margin-left: -25px;
		}
		/* 土星轨道 */
		.saturn {
			position: absolute;
			width: 624px;
			height: 624px;
			border-radius: 50%;
			border: 1px solid rgba(255, 255, 255, 0.5);
			top: 50%;
			left: 50%;
			margin-top: -313px;
			margin-left: -313px;

			transform-style: preserve-3d;
			animation: rotate 180s infinite linear paused;
			-webkit-transform-style: preserve-3d;
			-webkit-animation: rotate 180s infinite linear;
			-webkit-animation-play-state: paused;
		}
		/* 土星 */
		.saturn:after {
			position: absolute;
			content: '';
			width: 34px;
			height: 34px;
			border-radius: 50%;
			background-image: repeating-linear-gradient(30deg, rgb(113, 72, 46) 5%, rgb(220, 180, 109) 50%, rgb(113, 72, 46) 100%);
			background-image: -webkit-repeating-linear-gradient(60deg, rgb(113, 72, 46) 5%, rgb(220, 180, 109) 50%, rgb(113, 72, 46) 100%);
			margin-top: 295px;
			margin-left: -17px;
		}
		/* 土星环 */
		.saturn:before {
			position: absolute;
			content: '';
			width: 44px;
			height: 16px;
			border-radius: 50%;
			border: 8px solid rgba(136, 84, 30, 1);
			margin-top: 295px;
			margin-left: -30px;

			transform: rotateX(60deg) rotateY(30deg);
			-webkit-transform: rotateX(60deg) rotateY(30deg);
		}
		/* 天王星轨道 */
		.uranus {
			position: absolute;
			width: 754px;
			height: 754px;
			border-radius: 50%;
			border: 1px solid rgba(255, 255, 255, 0.5);
			top: 50%;
			left: 50%;
			margin-top: -378px;
			margin-left: -378px;

			transform-style: preserve-3d;
			animation: rotate 500s infinite linear paused;
			-webkit-transform-style: preserve-3d;
			-webkit-animation: rotate 500s infinite linear;
			-webkit-animation-play-state: paused;
		}
		/* 天王星 */
		.uranus:after {
			position: absolute;
			content: '';
			width: 44px;
			height: 44px;
			border-radius: 50%;
			background-image: radial-gradient(ellipse farthest-corner at 90% 90%, rgb(170, 245, 246) 15%, rgb(1, 102, 121) 60%);
			background-image: -webkit-radial-gradient(90% 90%, rgb(170, 245, 246) 15%, rgb(1, 102, 121) 60%);
			margin-top: 355px;
			margin-left: -22px;
		}
		/* 天王星环 */
		.uranus:before {
			position: absolute;
			content: '';
			width: 50px;
			height: 20px;
			border-radius: 50%;
			border: 10px solid rgba(255, 255, 255, 0.3);
			margin-top: 355px;
			margin-left: -35px;

			transform: rotateX(60deg) rotateY(-45deg);
			-webkit-transform: rotateX(60deg) rotateY(-45deg);
		}
		/* 海王星轨道 */
		.neptune {
			position: absolute;
			width: 852px;
			height: 852px;
			border-radius: 50%;
			border: 1px solid rgba(255, 255, 255, 0.5);
			top: 50%;
			left: 50%;
			margin-top: -427px;
			margin-left: -427px;

			animation: rotate 1000s infinite linear paused;
			-webkit-animation: rotate 1000s infinite linear;
			-webkit-animation-play-state: paused;
		}
		/* 海王星 */
		.neptune:after {
			position: absolute;
			content: '';
			width: 26px;
			height: 26px;
			border-radius: 50%;
			background-color: rgba(98, 134, 231, 1);
			margin-top: 413px;
			margin-left: -13px;
		}

		/* - - - - - - 控件 - - - - - - */
		.controls {
			position: absolute;
			margin-top: 50px;
			margin-left: 50px;
			z-index: 1;
		}
		.btn {
			padding: 10px 20px;
			outline: 0 none;
			border-radius: 15px;
			cursor: pointer;
		}
		/* 控制动画开始, 默认停止 */
		.on {
			animation-play-state: running !important;
			-webkit-animation-play-state: running !important;
		}

		/* - - - - - - 动画 - - - - - - */
		@keyframes rotate {
			0% {transform: rotate(0deg);}
			100% {transform: rotate(-360deg);}
		}
		@-webkit-keyframes rotate {
			0% {-webkit-transform: rotate(0deg);}
			100% {-webkit-transform: rotate(-360deg);}
		}
	</style>
	<script type="text/javascript">
		window.onload = function() {
			// 获取元素
			var toggle = document.getElementById('toggle');
				toggle.textContent = 'Strat';

			// 封闭空间与数组, 处理掉非元素节点
			var planets = [];
			;(function() {
				var nodes = document.getElementsByClassName('eight-planets')[0].childNodes;
				for (var i = 0; i < nodes.length; i++) {
					if (nodes[i].nodeType === 1) {
						// 填充数组
						planets.push(nodes[i]);
					}
				}
			})();

			// 类名变更函数
			function changeClass() {
				for (var i = 0; i < planets.length; i++) {
					var curClass = planets[i].getAttribute('class');

					var change = '';
					if (curClass.indexOf(' on') === -1) {
						change = curClass + ' on';
					} else {
						change = curClass.replace(' on', '');
					}

					planets[i].setAttribute('class', change);
				}
			}

			// 开始与暂停
			toggle.onclick = function() {
				if (this.textContent === 'Strat') {
					toggle.textContent = 'Stop';
				} else {
					toggle.textContent = 'Strat';
				}
				changeClass('on');
			}
		}
	</script>
</head>
<body>
	<div class="solar-system">
		<!-- 中心区 -->
		<div class="main-center">
			<!-- 太阳 -->
			<div class="sun"></div>
		</div>

		<!-- 八大行星 -->
		<div class="eight-planets">
			<!-- 水星 -->
			<div class="mercury"></div>
			<!-- 金星 -->
			<div class="venus"></div>
			<!-- 地球 -->
			<div class="earth"></div>
			<!-- 火星 -->
			<div class="mars"></div>
			<!-- 木星 -->
			<div class="jupiter"></div>
			<!-- 土星 -->
			<div class="saturn"></div>
			<!-- 天王星 -->
			<div class="uranus"></div>
			<!-- 海王星 -->
			<div class="neptune"></div>
		</div>
	</div>
	<!-- 控件 -->
	<div class="controls">
		<button class="btn" id="toggle"></button>
	</div>
</body>
</html>
iuukai
关注
  • 3
    点赞
  • 踩
  • 9
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
行星介绍html页面布局,css3 html5实现太阳系行星公转动画实例
weixin_39790760的博客
06-03 818
本文我们分享用css3的animation画一个太阳系恒星公转的动画，如何实现画椭圆的运行轨迹，最后结合css3的clip-path做一些比较特别的动画。模拟太阳系行情公转动画最终的效果图如下：css3的animation是通过关键帧的形式做出来的，首先设定一个动画的运行时间，然后在这个时间轴上的若干位置处插入关键帧，浏览器根据关键帧设定的内容做过渡动画。animation一般结合transfor...
纯CSS3绘制太阳系行星动画运动轨迹
09-08
纯CSS3绘制太阳系行星动画运动轨迹
HTML+CSS 绘制太阳系各个行星运行轨迹
最新发布
zeyeqianli的博客
02-02 457
在这个网页中，太阳是太阳系的中心，围绕着太阳运动的行星有水星、金星、地球、火星、木星、土星、天王星和海王星。每个行星都有自己的轨道，不同行星的运动速度和轨道大小也不同，使得整个太阳系呈现出多样化的美丽景象。这个项目是一个太阳系各个行星运行轨迹的静态网页，通过CSS3动画实现行星的旋转。它可视化了太阳系行星的运动轨迹和相对位置，给人们以更直观的感受。
太阳系行星运行轨道模拟动画-基于htmlConvas
soderayer的博客
05-07 6285
1.整理模拟动画缘由 最近儿子对宇宙和太阳系特别感兴趣，每天都要我给他将《宇宙有多大》、《神秘的太阳系》等书籍，不讲晚上不睡觉，经常会问一些难以回答的问题，有时候还要看一些太阳系的视频。因此，觉得可以整理一个太阳系模拟动画给儿子看，这个动画我们可以调整星球的大小（改变星球图片素材的大小），可以改变星球轨道的大小、颜色、星球绕行的速度等。效果如图： 2.太阳系介绍 复制一波百度百科介绍，方便大家了解太阳系：太阳系-百度百科 2.1 基本介绍 太阳系（英文：Solar system）是一个受太阳引
css3类似太阳系按轨迹旋转
ICode联盟
08-03 198
css3实现的围绕中心点旋转，类似太阳行星系按轨迹旋转动画特效。
CSS3太阳系各行星运行动画
04-16
解压密码：RJ4587 这是一个基于CSS3的太阳系行星运行动画，中间是太阳，9大行星，包括行星相应的卫星，都按照自身的规律围绕太阳旋转，同时在太空中隐约模拟出许多星云，让整个动画显得更加逼真。这些动画效果都是...
html5 canvas太阳系九大行星运行动态图代码
09-08
“html5 canvas太阳系九大行星运行动态图代码”是一个使用HTML5 Canvas API实现的动画效果，展示了太阳系内九大行星（水星、金星、地球、火星、木星、土星、天王星、海王星和冥王星）围绕太阳的运动轨迹。...
HTML5 canvas太阳系八大行星运行轨道图.zip
05-27
在这个“HTML5 canvas太阳系八大行星运行轨道图”实例中，我们看到的是利用canvas元素来模拟太阳系中八大行星的运行轨道，并且通过鼠标悬停功能，用户可以查看每个行星的名称，这为学习和展示天文学知识提供了一个...
HTML5 canvas太阳系八大行星运行轨道图源码 HcanvasEightorbitsof.rar
11-26
HTML5 canvas太阳系八大行星运行轨道图源码 源码描述： 一、源码特点 1、HTML5 canvas太阳系八大行星运行轨道图，鼠标经过目标行星显示行星名称。 二、注意事项 1、开发环境为Visual Studio 2013，无数据库，使用...
使用css3的动画模拟太阳系行星公转
weixin_34331102的博客
10-13 553
本文介绍使用css3的animation画一个太阳系行星公转的动画，再加以改进，讨论如何画椭圆的运行轨迹。然后分析京东和人人网使用animation的实际案例，最后结合css3的clip-path做一些比较特别的动画。 太阳系最终的效果图如下： 　　css3的animation是通过关键帧的形式做出来的，首先设定一个动画的运行时间，然后在这个时间轴上的若干位置处插入关键帧，浏览器根据关键帧...
D3D模拟太阳系八大行星系统
01-09
花了一天时间写的.D3D方式.带源代码.模拟太阳系八大行星系统.精确度没有怎么考虑.仅供参考.
css3太阳系旋转
zhanghuijie523的专栏
07-02 625
css3太阳系旋转-css3实例站 * { margin: 0; padding: 0; } body { font: 14px/1.5 "Helvetica Neue", Helvetica, Arial, sans-serif; background: #080e24 repeat; color: #626668; } sect
用CSS3制作太阳系行星运动简图
奶香片的日子
04-26 1958
CSS3的小实验  本文章仅仅是对基础的CSS3进行讲解，更加详细的内容均会附上链接，以便查阅和版权保护。   快一个月没更新博客了，期中考试的那些题也没什么好说的必要，，，，今天想着期中考试忙的差不多了，就看看CSS的东西，看到一个行星运动的图还挺好玩，就来讲讲。然后因为我之前对CSS以及HTML5的基础部分讲解较为多，故在这里对我认为比较简单的部分就不做讲解，如果有不了解的地方可以看看我以前的...
css 轨道,CSS3实现漂亮的星系轨道旋转特效
weixin_36108913的博客
08-03 693
效果：http://hovertree.com/texiao/css3/24/后面附有源码下载效果图：代码如下：CSS3实现星系轨道旋转特效 - 何问起何问起JS代码网页特效HoverTreeSCJHoverTree月亮柯乐义适用浏览器：360、FireFox、Chrome、Opera、傲游、搜狗、世界之窗等新版浏览器。来源：何问起 原文 特效CSS代码如下：/* 何问起 hovertree.co...
自己写的一个近似模拟太阳系行星运行的代码（更新CSS3代码在下方）
lianglv123的专栏
02-14 2385
以前看到过一个很酷的网页，大概是一个模拟太阳系行星的运行，不记得是用HTML5还是CSS3还是JS了（好像都能实现。。。）自己就尝试用Jquery写了一下，大概的轮廓是写出来了，以下的完整代码： #plg1{border:solid 1px;width:700px;height:700px;border-radius:700px;position:absolute;} #plan
CSS3 旋转 太阳系
weixin_30545285的博客
05-12 140
参考https://www.tadywalsh.com/web/cascading-solar-system/ 首先 旋转有两种方式 一种是使用 transform-origin 另一种是transform: rotate(..) translateY(); 用这个来理解transfrom-origin http://www.css88.com/tool/css3Preview/Tra...
Css3动画（一） 如何画3D旋转效果或者卫星围绕旋转效果
weixin_33985679的博客
05-28 1166
如何画3D旋转效果或者卫星围绕旋转效果，当然这个也是工作中的一个任务，我在网上翻了一下，并没有找到类似的东西，所以写下来还是费了一番功夫，因此我把它拿出来记录一下，当然替换了一部分内容。好了，话不多说，进入正题。 我们都知道，浏览器是一个平面的视觉效果，如何在一个平面上看出立体的3D效果呢，其实就是一个视觉差的问题。那我们就从一个平面视觉效果一步一步画出立体的3D效果来。我还是先把效...
js+css3轨迹旋转动画js特效
ICode联盟
09-24 193
js+css3轨迹旋转动画特效。
CSS3九大行星绕太阳周转动画效果
05-31
以下是使用 CSS3 实现的九大行星绕太阳周转的动画效果： HTML代码： ```html <div class="sun"></div> <div class="mercury"></div> <div class="venus"></div> <div class="earth"></div> <div class="mars"></div> <div class="jupiter"></div> <div class="saturn"></div> <div class="uranus"></div> <div class="neptune"></div> ``` CSS代码： ```css .sun { width: 200px; height: 200px; border-radius: 50%; background-color: #f9d71c; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); z-index: 1; box-shadow: 0 0 50px #f9d71c, 0 0 100px #f9d71c, 0 0 150px #f9d71c, 0 0 200px #f9d71c; animation: rotate-sun 10s linear infinite; } .mercury { width: 20px; height: 20px; border-radius: 50%; background-color: #b5b5b5; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%) translateX(70px); animation: rotate-mercury 3s linear infinite; } .venus { width: 35px; height: 35px; border-radius: 50%; background-color: #f2b02e; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%) translateX(120px); animation: rotate-venus 5s linear infinite; } .earth { width: 40px; height: 40px; border-radius: 50%; background-color: #3a7cff; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%) translateX(160px); animation: rotate-earth 8s linear infinite; } .mars { width: 25px; height: 25px; border-radius: 50%; background-color: #ff4f4f; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%) translateX(200px); animation: rotate-mars 10s linear infinite; } .jupiter { width: 80px; height: 80px; border-radius: 50%; background-color: #c05c3c; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%) translateX(300px); animation: rotate-jupiter 20s linear infinite; } .saturn { width: 70px; height: 70px; border-radius: 50%; background-color: #d8c58e; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%) translateX(400px); animation: rotate-saturn 30s linear infinite; } .uranus { width: 60px; height: 60px; border-radius: 50%; background-color: #6ecfff; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%) translateX(500px); animation: rotate-uranus 40s linear infinite; } .neptune { width: 55px; height: 55px; border-radius: 50%; background-color: #3456a9; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%) translateX(600px); animation: rotate-neptune 50s linear infinite; } @keyframes rotate-sun { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } } @keyframes rotate-mercury { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } } @keyframes rotate-venus { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } } @keyframes rotate-earth { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } } @keyframes rotate-mars { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } } @keyframes rotate-jupiter { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } } @keyframes rotate-saturn { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } } @keyframes rotate-uranus { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } } @keyframes rotate-neptune { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } } ``` 解释一下代码： 1. `.sun` 代表太阳，使用 `border-radius: 50%` 将其设置为圆形，使用 `box-shadow` 添加光晕效果，使用 `animation` 添加旋转动画。 2. `.mercury` 到 `.neptune` 分别代表九大行星，使用不同的颜色、大小、位置和旋转速度等属性，使用 `animation` 添加旋转动画。 3. `@keyframes` 定义了动画执行的关键帧，从 `0%` 开始，旋转角度为 `0deg`，到 `100%` 结束，旋转角度为 `360deg`。 4. 通过设置 `translateX` 属性实现行星的位置偏移，从而实现绕太阳周转的效果。 这样就可以实现九大行星绕太阳周转的动画效果了。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值