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-template-rows: repeat(10, auto);
        grid-template-areas:
                "pluto"
                "neptune"
                "uranus"
                "saturn"
                "jupiter"
                "mars"
                "earth"
                "venus"
                "mercury"
                "sun";

        .orbit {
                --sun-margin: calc(var(--sun-diameter) * var(--sun-spacing));
                --planet-diameter: max(var(--planet-size) * var(--sun-diameter), 1rem);

                grid-column: 1 / -1;
                display: grid;
                grid-template-rows: subgrid;
                grid-template-columns: subgrid;
                justify-items: center;

                &:has(.sun) {
                        --planet-size: 1;
                        grid-area: sun;
                        padding-block: var(--sun-margin);
            .label {
                color: transparent;
            }
                }
                &:has(.mercury) {
                        --planet-size: var(--mercury-size);
                        --planet-duration: calc(var(--earth-duration) * var(--mercury-period));
                        grid-row: mercury-start / sun-end;
                        .planet, .label {
                                grid-area: mercury;
                        }
                }
                &:has(.venus) {
                        --planet-size: var(--venus-size);
                        --planet-duration: calc(var(--earth-duration) * var(--venus-period));
                        grid-row: venus-start / sun-end;
                        .planet, .label {
                                grid-area: venus;
                        }
                }
                &:has(.earth) {
                        --planet-size: var(--earth-size);
                        --planet-duration: var(--earth-duration);
                        grid-row: earth-start / sun-end;
                        .planet, .label {
                                grid-area: earth;
                        }
                }
                &:has(.mars) {
                        --planet-size: var(--mars-size);
                        --planet-duration: calc(var(--earth-duration) * var(--mars-period));
                        grid-row: mars-start / sun-end;
                        .planet, .label {
                                grid-area: mars;
                        }
                }
                &:has(.jupiter) {
                        --planet-size: var(--jupiter-size);
                        --planet-duration: calc(var(--earth-duration) * var(--jupiter-period));
                        grid-row: jupiter-start / sun-end;
                        .planet, .label {
                                grid-area: jupiter;
                        }
                }
                &:has(.saturn) {
                        --planet-size: var(--saturn-size);
                        --planet-duration: calc(var(--earth-duration) * var(--saturn-period));
                        grid-row: saturn-start / sun-end;
                        .planet, .label {
                                grid-area: saturn;
                        }

                }
                &:has(.uranus) {
                        --planet-size: var(--uranus-size);
                .........完整代码请登录后点击上方下载按钮下载查看