28 星际旋转

效果演示

28-星际旋转.gif

实现了一个太阳系动画，其中包括了地球、火星、金星、土星、水星、天王星、海王星以及火卫二号等行星的动画效果。太阳系的行星都被放在一个固定的容器中，并使用CSS动画来实现旋转和移动的效果。当太阳系的行星绕着太阳运行时，它们会围绕太阳旋转，并且在运行过程中会发生碰撞和交叉。

Code

<div class="wrapper"><div class="neptune-container"><img src="img/neptune.png" /></div><div class="uranus-container"><img src="img/uranus.svg" /></div><div class="saturn-container"><img src="img/saturn.png" /></div><div class="jupiter-container"><img src="img/jupiter.png" /></div><div class="mars-container"><img src="img/mars.png" /></div><div class="earth-container"><img src="img/earth.png" /></div><div class="venus-container"><img src="img/venus.png" /></div><div class="mercury-container"><img src="img/mercury.png" /></div><div class="sun-container"><img src="img/sun.png" /></div>
</div>

* {margin: 0;padding: 0;box-sizing: border-box;
}body {display: flex;justify-content: center;align-items: center;height: 100vh;background-image: url(img/space-background.jpg)
}.wrapper {height: 100%;width: 100%;display: flex;justify-content: center;align-items: center;
}.wrapper div {position: absolute;border-radius: 100%;display: flex;justify-content: center;align-items: center;border: 1px solid white;position: absolute;
}.neptune-container {height: 850px;width: 850px;
}.neptune-container>img {height: 50px;width: 50px;animation: neptune-rotation 53954ms linear infinite;
}.uranus-container {height: 750px;width: 750px;
}.uranus-container>img {height: 75px;width: 75px;animation: uranus-rotation 37054ms linear infinite;
}.saturn-container {height: 600px;width: 600px;
}.saturn-container>img {height: 75px;width: 75px;animation: saturn-rotation 33218ms linear infinite;
}.jupiter-container {height: 500px;width: 500px;
}.jupiter-container>img {height: 75px;width: 75px;animation: jupiter-rotation 27339ms linear infinite;
}.mars-container {height: 400px;width: 400px;
}.mars-container>img {height: 35px;width: 35px;animation: mars-rotation 12684ms linear infinite;
}.earth-container {height: 350px;width: 350px;
}.earth-container>img {height: 30px;width: 30px;animation: earth-rotation 11079ms linear infinite;
}.venus-container {height: 300px;width: 300px;
}.venus-container>img {height: 20px;width: 20px;animation: venus-rotation 7259ms linear infinite;
}.mercury-container {height: 250px;width: 250px;
}.mercury-container>img {height: 15px;width: 15px;animation: mercury-rotation 5768ms linear infinite;
}.sun-container {height: 200px;width: 200px;border-radius: 100%;display: flex;justify-content: center;align-items: center;
}.sun-container>img {height: 310px;width: 310px;
}@keyframes neptune-rotation {0% {transform: rotate(0deg) translate(425px) rotate(0deg);}100% {transform: rotate(360deg) translate(425px) rotate(360deg);}
}@keyframes uranus-rotation {0% {transform: rotate(0deg) translate(375px) rotate(0deg);}100% {transform: rotate(360deg) translate(375px) rotate(360deg);}
}@keyframes saturn-rotation {0% {transform: rotate(0deg) translate(300px) rotate(0deg);}100% {transform: rotate(360deg) translate(300px) rotate(360deg);}
}@keyframes jupiter-rotation {0% {transform: rotate(0deg) translate(250px) rotate(0deg);}100% {transform: rotate(360deg) translate(250px) rotate(360deg);}
}@keyframes mars-rotation {0% {transform: rotate(0deg) translate(200px) rotate(0deg);}100% {transform: rotate(360deg) translate(200px) rotate(360deg);}
}@keyframes earth-rotation {0% {transform: rotate(0deg) translate(175px) rotate(0deg);}100% {transform: rotate(360deg) translate(175px) rotate(360deg);}
}@keyframes venus-rotation {0% {transform: rotate(0deg) translate(150px) rotate(0deg);}100% {transform: rotate(360deg) translate(150px) rotate(360deg);}
}@keyframes mercury-rotation {0% {transform: rotate(0deg) translate(125px) rotate(0deg);}100% {transform: rotate(360deg) translate(125px) rotate(360deg);}
}

实现思路拆分

* {margin: 0;padding: 0;box-sizing: border-box;
}

这段代码是设置全局样式，包括设置元素的盒模型为border-box，即盒模型的宽度和高度包括内容、内边距、边框和外边距。

body {display: flex;justify-content: center;align-items: center;height: 100vh;background-image: url(img/space-background.jpg)
}

这段代码是设置整个页面的样式，包括设置页面的高度为100vh，即视口的高度，使页面填充整个屏幕。同时，设置页面的背景图片为space-background.jpg。

.wrapper {height: 100%;width: 100%;display: flex;justify-content: center;align-items: center;
}

这段代码是设置一个容器的样式，包括设置容器的高度和宽度为100%，使容器填充整个屏幕。同时，设置容器的显示方式为flex，使容器中的元素可以自动排列。

.wrapper div {position: absolute;border-radius: 100%;display: flex;justify-content: center;align-items: center;border: 1px solid white;position: absolute;
}

这段代码是设置太阳系中的行星的样式，包括设置行星的位置为绝对定位，使其相对于容器的位置进行定位。同时，设置行星的圆角半径为100%，使其变成一个圆形。设置行星的显示方式为flex，使其中的元素可以自动排列。设置行星的边框为1px solid white，使其看起来像一个白色的圆形。

.neptune-container {height: 850px;width: 850px;
}.neptune-container>img {height: 50px;width: 50px;animation: neptune-rotation 53954ms linear infinite;
}

这段代码是设置尼普斯星的样式，包括设置行星的高度和宽度为850px，使其变成一个圆形。同时，设置行星的动画效果为neptune-rotation，即使用CSS动画实现行星的旋转效果。

.uranus-container {height: 750px;width: 750px;
}.uranus-container>img {height: 75px;width: 75px;animation: uranus-rotation 37054ms linear infinite;
}

这段代码是设置乌拉斯星的样式，包括设置行星的高度和宽度为750px，使其变成一个圆形。同时，设置行星的动画效果为uranus-rotation，即使用CSS动画实现行星的旋转效果。

.saturn-container {height: 600px;width: 600px;
}.saturn-container>img {height: 75px;width: 75px;animation: saturn-rotation 33218ms linear infinite;
}

这段代码是设置土星的样式，包括设置行星的高度和宽度为600px，使其变成一个圆形。同时，设置行星的动画效果为saturn-rotation，即使用CSS动画实现行星的旋转效果。

.jupiter-container {height: 500px;width: 500px;
}.jupiter-container>img {height: 75px;width: 75px;animation: jupiter-rotation 27339ms linear infinite;
}

这段代码是设置木星的样式，包括设置行星的高度和宽度为500px，使其变成一个圆形。同时，设置行星的动画效果为jupiter-rotation，即使用CSS动画实现行星的旋转效果。

.mars-container {height: 400px;width: 400px;
}

这段代码是设置火星的样式，包括设置行星的高度和宽度为400px，使其变成一个圆形。

.mars-container>img {height: 35px;width: 35px;animation: mars-rotation 12684ms linear infinite;
}

这段代码是设置火星的图片样式，包括设置图片的高度和宽度为35px，使其变成一个圆形。同时，设置图片的动画效果为mars-rotation，即使用CSS动画实现行星的旋转效果。

.earth-container {height: 350px;width: 350px;
}

这段代码是设置地球的样式，包括设置行星的高度和宽度为350px，使其变成一个圆形。

.earth-container>img {height: 30px;width: 30px;animation: earth-rotation 11079ms linear infinite;
}

这段代码是设置地球的图片样式，包括设置图片的高度和宽度为30px，使其变成一个圆形。同时，设置图片的动画效果为earth-rotation，即使用CSS动画实现行星的旋转效果。

.venus-container {height: 300px;width: 300px;
}

这段代码是设置金星的样式，包括设置行星的高度和宽度为300px，使其变成一个圆形。

.venus-container>img {height: 20px;width: 20px;animation: venus-rotation 7259ms linear infinite;
}

这段代码是设置金星的图片样式，包括设置图片的高度和宽度为20px，使其变成一个圆形。同时，设置图片的动画效果为venus-rotation，即使用CSS动画实现行星的旋转效果。

.mercury-container {height: 250px;width: 250px;
}

这段代码是设置水星的样式，包括设置行星的高度和宽度为250px，使其变成一个圆形。

.mercury-container>img {height: 15px;width: 15px;animation: mercury-rotation 5768ms linear infinite;
}

这段代码是设置水星的图片样式，包括设置图片的高度和宽度为15px，使其变成一个圆形。同时，设置图片的动画效果为mercury-rotation，即使用CSS动画实现行星的旋转效果。

.sun-container {height: 200px;width: 200px;border-radius: 100%;display: flex;justify-content: center;align-items: center;
}

这段代码是设置太阳的样式，包括设置行星的高度和宽度为200px，使其变成一个圆形。同时，设置行星的圆角半径为100%，使其变成一个圆形。设置行星的显示方式为flex，使其中的元素可以自动排列。设置行星的居中方式为居中对齐，使其在容器中居中显示。

.sun-container>img {height: 310px;width: 310px;
}

这段代码是设置太阳的图片样式，包括设置图片的高度和宽度为310px，使其变成一个圆形。

@keyframes neptune-rotation {0% {transform: rotate(0deg) translate(425px) rotate(0deg);}100% {transform: rotate(360deg) translate(425px) rotate(360deg);}
}

这段代码是定义了一个名为neptune-rotation的CSS动画，用于实现尼普斯星的旋转动画。该动画包含两个关键帧，分别为0%和100%。在0%时，尼普斯星的旋转角度为0度，并向右移动425px。在100%时，尼普斯星的旋转角度为360度，并向右移动425px。

@keyframes uranus-rotation {0% {transform: rotate(0deg) translate(375px) rotate(0deg);}100% {transform: rotate(360deg) translate(375px) rotate(360deg);}
}

这段代码是定义了一个名为uranus-rotation的CSS动画，用于实现乌拉斯星的旋转动画。该动画包含两个关键帧，分别为0%和100%。在0%时，乌拉斯星的旋转角度为0度，并向右移动375px。在100%时，乌拉斯星的旋转角度为360度，并向右移动375px。

@keyframes saturn-rotation {0% {transform: rotate(0deg) translate(300px) rotate(0deg);}100% {transform: rotate(360deg) translate(300px) rotate(360deg);}
}

这段代码是定义了一个名为saturn-rotation的CSS动画，用于实现土星的旋转动画。该动画包含两个关键帧，分别为0%和100%。在0%时，土星的旋转角度为0度，并向右移动300px。在100%时，土星的旋转角度为360度，并向右移动300px。

@keyframes jupiter-rotation {0% {transform: rotate(0deg) translate(250px) rotate(0deg);}100% {transform: rotate(360deg) translate(250px) rotate(360deg);}
}

这段代码是定义了一个名为jupiter-rotation的CSS动画，用于实现木星的旋转动画。该动画包含两个关键帧，分别为0%和100%。在0%时，木星的旋转角度为0度，并向右移动250px。在100%时，木星的旋转角度为360度，并向右移动250px。

@keyframes mars-rotation {0% {transform: rotate(0deg) translate(200px) rotate(0deg);}100% {transform: rotate(360deg) translate(200px) rotate(360deg);}
}

这段代码是定义了一个名为mars-rotation的CSS动画，用于实现火星的旋转动画。该动画包含两个关键帧，分别为0%和100%。在0%时，火星的旋转角度为0度，并向右移动200px。在100%时，火星的旋转角度为360度，并向右移动200px。

@keyframes earth-rotation {0% {transform: rotate(0deg) translate(175px) rotate(0deg);}100% {transform: rotate(360deg) translate(175px) rotate(360deg);}
}

这段代码是设置地球的动画效果，包括设置动画的名称为earth-rotation，即使用CSS动画实现地球的旋转效果。在0%时，将地球的位置设置为0deg，并将其向右移动175px。在100%时，将地球的位置设置为360deg，并将其向右移动175px。

@keyframes venus-rotation {0% {transform: rotate(0deg) translate(150px) rotate(0deg);}100% {transform: rotate(360deg) translate(150px) rotate(360deg);}
}

这段代码是设置金星的动画效果，包括设置动画的名称为venus-rotation，即使用CSS动画实现金星的旋转效果。在0%时，将金星的位置设置为0deg，并将其向右移动150px。在100%时，将金星的位置设置为360deg，并将其向右移动150px。

@keyframes mercury-rotation {0% {transform: rotate(0deg) translate(125px) rotate(0deg);}100% {transform: rotate(360deg) translate(125px) rotate(360deg);}
}