CSS行星环绕动画

下载代码

html

css

分享到微信朋友圈

html

css

:root 
{
    --dark-color: rgb(0,0,0);
    --glossy-red: rgba(238, 17, 17, 1);
    --light-red: rgba(238, 17, 17, .5);
    --very-light-red: rgba(238, 17, 17, .25);
    --planets-theme: var(--light-red) var(--light-red) var(--light-red) var(--glossy-red) ;
    --paths-theme: var(--very-light-red) var(--glossy-red);
}
*
{
    box-sizing: border-box;
    padding: 0;

border: 0;
}
body
{
    overflow: hidden;

background-color: var(--dark-color);
    /*
    background: fixed no-repeat center url(stars.png);
    background-size: cover;
    */
}

#solar-system
{
    display: flex;

width: 100vw;
    height: 100vh;

-webkit-transform: skewX(-45deg);
       -moz-transform: skewX(-45deg);
        -ms-transform: skewX(-45deg);
         -o-transform: skewX(-45deg);
            transform: skewX(-45deg);
    transform-origin: center;

justify-content: center;
    align-items: center;
}

/* planets */

#sun
{
    position: fixed;
    z-index: 100;

width: 174.085px;
    height: 174.085px;

-webkit-transform: skewX(45deg);
       -moz-transform: skewX(45deg);
        -ms-transform: skewX(45deg);
         -o-transform: skewX(45deg);
            transform: skewX(45deg);

border-radius: 50%;
            background: linear-gradient(135deg, var(--glossy-red) 20%, transparent 100%);

-webkit-background: linear-gradient(135deg, var(--glossy-red) 20%, transparent 100%);
       -moz-background: linear-gradient(135deg, var(--glossy-red) 20%, transparent 100%);
         -o-background: linear-gradient(135deg, var(--glossy-red) 20%, transparent 100%);
        -ms-background: linear-gradient(135deg, var(--glossy-red) 20%, transparent 100%);
    filter: drop-shadow(0 0 2rem var(--glossy-red)) blur(1px);
}
#mercury
{
    position: fixed;
    z-index: 99;
    top: 38px;

display: flex;

width: 24.397px;
    height: 24.397px;

-webkit-animation: planets-rotation 29s linear infinite;
       -moz-animation: planets-rotation 29s linear infinite;
        -ms-animation: planets-rotation 29s linear infinite;
         -o-animation: planets-rotation 29s linear infinite;
            animation: planets-rotation 29s linear infinite;

border-width: 2px;
    border-style: solid;
    border-color: var(--planets-theme);
    border-radius: 50%;
    background: transparent;

justify-content: center;
    align-items: center;
}

#venus
{
    position: fixed;
    z-index: 99;
    top: 13px;

display: flex;

width: 60.518px;
    height: 60.518px;

-webkit-animation: planets-rotation 121.5s linear infinite;
       -moz-animation: planets-rotation 121.5s linear infinite;
        -ms-animation: planets-rotation 121.5s linear infinite;
         -o-animation: planets-rotation 121.5s linear infinite;
            animation: planets-rotation 121.5s linear infinite;

border-width: 2px;
    border-style: solid;
    border-color: var(--planets-theme);
    border-radius: 50%;
    background: transparent;

justify-content: center;
    align-items: center;
}

#earth
{
    position: fixed;
    z-index: 99;
    top: 34px;

display: flex;

width: 63.71px;
    height: 63.71px;
    /* animation-duration: .5s = 1 day on earth */

-webkit-animation: planets-rotation .5s linear infinite;
       -moz-animation: planets-rotation .5s linear infinite;
        -ms-animation: planets-rotation .5s linear infinite;
         -o-animation: planets-rotation .5s linear infinite;
            animation: planets-rotation .5s linear infinite;

border-width: 2px;
    border-style: solid;
    border-color: var(--planets-theme);
    border-radius: 50%;
    background: transparent;

justify-content: center;
    align-items: center;
}
#earth::after
{
    position: absolute;

width: 40%; /* <-- set to 10% for the real planet size*/
    height: 40%;

content: '';
    -webkit-animation: blink-earth 2s linear infinite;
       -moz-animation: blink-earth 2s linear infinite;
        -ms-animation: blink-earth 2s linear infinite;
         -o-animation: blink-earth 2s linear infinite;
            animation: blink-earth 2s linear infinite;

border-radius: 50%;
    background: var(--glossy-red);

-webkit-filter: drop-shadow(0 0 .3rem var(--light-red)) blur(.5px);
       -moz-filter: drop-shadow(0 0 .3rem var(--light-red)) blur(.5px);
         -o-filter: drop-shadow(0 0 .3rem var(--light-red)) blur(.5px);
        -ms-filter: drop-shadow(0 0 .3rem var(--light-red)) blur(.5px);
            filter: drop-shadow(0 0 .3rem var(--light-red)) blur(.5px);
}
#mars
{
    position: fixed;
    z-index: 99;
    top: 118px;

display: flex;

width: 33.895px;
    height: 33.895px;

border-width: 2px;
    border-style: solid;
    border-color: var(--planets-theme);
    border-radius: 50%;
    background: transparent;

justify-content: center;
    align-items: center;
}
#mars::after,
#venus::after,
#mercury::after
{
    position: absolute;

width: 40%; /* <-- set to 10% for the real planet size*/
    height: 40%;

content: '';

border-radius: 50%;
    background: var(--glossy-red);

/* planets trajectory */

#mercury-wrapper
{
    position: fixed;
    z-index: 98;

width: 203.085px;
    height: 203.085px;

-webkit-animation: solar-revolution 43.98s linear infinite;
       -moz-animation: solar-revolution 43.98s linear infinite;
        -ms-animation: solar-revolution 43.98s linear infinite;
         -o-animation: solar-revolution 43.98s linear infinite;
            animation: solar-revolution 43.98s linear infinite;

border-width: 2px;
    border-style: solid;
    border-color: var(--paths-theme);
    border-radius: 50%;
}
#venus-wrapper
{
    position: fixed;
    z-index: 98;

width: 257.085px;
    height: 257.085px;

-webkit-animation: solar-revolution 112.345s linear infinite;
       -moz-animation: solar-revolution 112.345s linear infinite;
        -ms-animation: solar-revolution 112.345s linear infinite;
         -o-animation: solar-revolution 112.345s linear infinite;
            animation: solar-revolution 112.345s linear infinite;

border-width: 2px;
    border-style: solid;
    border-color: var(--paths-theme);
    border-radius: 50%;
}

#earth-wrapper
{
    position: fixed;
    z-index: 98;

width: 332.085px;
    height: 332.085px;
    /* animation-duration: .5s = 1 day on earth */

-webkit-animation: solar-revolution 182.625s linear infinite;
       -moz-animation: solar-revolution 182.625s linear infinite;
        -ms-animation: solar-revolution 182.625s linear infinite;
         -o-animation: solar-revolution 182.625s linear infinite;
            animation: solar-revolution 182.625s linear infinite;

border-width: 2px;
    border-style: solid;
    border-color: var(--paths-theme);
    border-radius: 50%;
}

#mars-wrapper
{
    position: fixed;
    z-index: 98;

width: 446.085px;
    height: 446.085px;

-webkit-animation: solar-revolution 343.485s linear infinite;
       -moz-animation: solar-revolution 343.485s linear infinite;
        -ms-animation: solar-revolution 343.485s linear infinite;
         -o-animation: solar-revolution 343.485s linear infinite;
            animation: solar-revolution 343.485s linear infinite;

border-width: 2px;
    border-style: solid;
    border-color: var(--paths-theme);
    border-radius: 50%;
}

/* animation */

@keyframes solar-revolution
{
    from
    {
        transform: rotate(0deg) ;
    }
    to
    {
        transform: rotate(360deg) ;
    }
}

@keyframes planets-rotation
{
    from
    {
        transform: rotate(0deg) ;
    }
    to
    {
        transform: rotate(360deg) ;
    }
}
@keyframes blink-earth
{
    from
    {
        background-color: var(--glossy-red);

filter: drop-shadow(0 0 .3rem var(--light-red)) blur(.5px);
    }
    to
    {
        background-color: var(--dark-color);

filter: drop-shadow(0 0 0 var(--light-red)) blur(0);
    }
}

JavaScript

粒子时间文字 hover canvas 3d 游戏音乐火焰水波轮播图鼠标跟随动画 css 加载动画导航菜单按钮滑块 tab 弹出层统计图 svg