日月輪轉

代碼在此：

	<style>
	/* background */
	.mk-dark-mode-sky, 
	.mk-dark-mode-sky:before {
		content: "";
		position: relative;
		z-index: 12;
		width: 240px;
		height: 240px;
		transition: 2s ease all;
		overflow: hidden;
	}
	.mk-dark-mode-sky {
		background: linear-gradient(#feb8b0, #fef9db);
	}
	.mk-dark-mode-sky:before {
		position: absolute;
		opacity: 0;
		background: linear-gradient(#4c3f6d, #6c62bb, #93b1ed);
	}
	.mk-dark-mode:before {
		opacity: 1;
	}
	/* planet */
	.mk-dark-mode-planet {
		position: absolute;
		left: -50%; top: -50%; width: 200%; height: 200%;
		z-index: 36;
		transform-origin: center bottom;
		transition: 2s cubic-bezier(.7, 0, 0, 1) all;
	}
	.mk-dark-mode-planet:after {
		position: absolute;
		left: 35%;
		top: 40%;
		width: 12%;
		height: 12%;
		border-radius: 50%;
		content: "";
		background: linear-gradient(#fefefe, #fffbe8);
	}
	</style>
	<div class="mk-dark-mode-sky">
		<div class="mk-dark-mode-planet"></div>
	</div>
	<script>
	var unlock = true;
	window.addEventListener("transitionend", function (e) {
		if (e.target.classList.contains("mk-dark-mode-planet")) {
			unlock = true;
		}
	}); 
	window.addEventListener("click", function (e) {
		if (unlock && e.target.classList.contains("mk-dark-mode-planet")) {
			unlock = false;
			var planet = document.querySelector('.mk-dark-mode-planet');
			var angle = planet.getAttribute('angle') || 360;
			// planet.style.transform = 'rotate(' + angle + 'deg)';
			planet.style.setProperty('transform', 'rotate(' + angle + 'deg)');
			angle = parseInt(angle) + 360;
			planet.setAttribute('angle', angle);
			var sky = document.querySelector('.mk-dark-mode-sky');
			sky.classList.toggle('mk-dark-mode');
		}
	});
	</script>

（本代碼來自孟坤博客，我理解之後對其進行了修改，使其能放在一個小框中運行。）