css模拟宇宙中太阳系行星轨迹动画效果代码-html代码-BFW代码库

代码语言：html

所属分类：动画

代码描述：css模拟宇宙中太阳系行星轨迹动画效果代码

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

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
<style>
: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);
}

#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;
    top: 36px;

    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;
    top: 11px;

    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;
    top: 30px;

    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;
    top: 118px;

    display: flex;

    width: 33.895px;
    height: 33.895px;

    -.........完整代码请登录后点击上方下载按钮下载查看