利用Css 动画模仿 一天的变化。

 利用Css 3动画模仿 一天的变化。

效果：

 html 布局：

    <div class="space"></div>
    <div class="sun"></div>
    <div class="moon"></div>

css代码：

        *{
            margin:0;
            padding: 0;
        }
        body{
            background-color: #000;
        }
        @keyframes colorChange{
            0%{
                opacity: 0;
            }
            25%{
                opacity:1;
            }
            50%{
                opacity: .3;
            }
            75%{
                opacity: .7;
            }
            100%{
                opacity: .1;
            }
        }
        .space{
            width: 100%;
            height: 650PX;
            background-image: linear-gradient(to bottom,rgba(0,130,255,1),rgba(255,255,255,1));
            animation: colorChange 10s cubic-bezier(.5,1,.5,1) infinite;
        }
        @keyframes topSs{
            0%{
                opacity: 0;
            }
            10%{
                opacity: 1;
                transform: scale(.5,.5) translateX(0) translateY(0);
            }
            25%{
                opacity: 1;
                transform: scale(.5,.5) translateX(0) translateY(-800px);
            }
            50%{
                opacity: 0;
                transform: scale(.5,.5) translateX(400px) translateY(0);
            }
            100%{
                opacity: 0;
            }
        }
        .sun{
            
                position: absolute;
                left: 50%;
                /* top: calc(50% - 50px);
                left: calc(50% - 50px); */
                width: 100px;
                height: 100px;
                border-radius: 50%;
                background-image:   repeating-radial-gradient(circle closest-side, #f00, #ff0 10%, #f00 15%);
                background-image: repeating-linear-gradient(90deg,#f0f,#ff0); 
                background-image: linear-gradient(211deg,red 50px,yellow 90px,#f0f 20px);
                background-image: radial-gradient(red,#f0f);  
                box-shadow: 0px 0px 100px 50px #fff,
                            0px 0px 50px  125px #ff0;
                transform: scale(.5,.5);
                animation: topSs 10s linear both infinite;      
        }
        @keyframes moonTop{
            0%{
                opacity: 0;
            }
            85%{
                opacity: 1;
                transform:translateY(-300px);
            }
            /* 65%{
                opacity: 1;
                transform:translateY(-200px);
            }
            75%{
                opacity: 1;
                transform:  translateY(-300px);
            } */
            100%{
                opacity: 0;
              
                
            }
        }
        .moon{
            width: 100px;
            height: 100px;
            background-color: #fff;
            border-radius: 50%;
            position: absolute;
            left: calc(50% + 400px);
            top: calc(50% - -100px);
            box-shadow: 0px 0px 8px #fff,
                        0px 0px 8px #000;
            animation: moonTop 7s linear both infinite;
           }
        /* .moon::after{
            content: '';
            position: absolute;
            width: 80px;
            height: 80px;
            background-color:#000;
            border-radius: 50%;
            left: -10px;
            top: -10px;
        } */