css+div实现太阳系行星运行轨迹动画效果代码-html代码-BFW代码库

css+div实现太阳系行星运行轨迹动画效果代码

代码语言：html

所属分类：动画

代码描述：css+div实现太阳系行星运行轨迹动画效果代码

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>
<html lang="en" >

<head>
  <meta charset="UTF-8">
  

  
  
  
<style>
* {
	box-sizing: border-box;
	margin: 0;
}

.solar-system {
	--sun-diameter: 12dvh;
	--sun-spacing: .15;

	/* very much not to scale */
	--mercury-size: .2;
	--venus-size: .25;
	--earth-size: .25;
	--mars-size: .25;
	--jupiter-size: .75;
	--saturn-size: .6;
	--uranus-size: .4;
	--neptune-size: .4;
	--pluto-size: .1;

	/* to scale! https://en.wikipedia.org/wiki/Orbital_period#Examples_of_sidereal_and_synodic_periods */
	--mercury-period: .24;
	--venus-period: .615;
	--earth-duration: 5s;
	--mars-period: 1.88;
	--jupiter-period: 11.86;
	--saturn-period: 29.46;
	--uranus-period: 84;
	--neptune-period: 164;
	--pluto-period: 248;

	padding: 1rem 0 0 0;
	overflow: hidden;

	display: grid;
	gap: calc(var(--sun-diameter) * .15);
	grid-templ.........完整代码请登录后点击上方下载按钮下载查看