Front-end daily combat: # 36 video demonstrates how to use CSS principles of animation, performance solar eclipse phenomenon on the page

Results preview

Press the right "click the Preview" button to preview the current page, click on the link to full-screen preview.

https://codepen.io/comehope/pen/OELvrK

Interactive video tutorials

This video is interactive, you can pause the code video, editing video.

Please use chrome, safari, edge open view.

https://scrimba.com/p/pEgDAM/cgnzMAz

Source code download

Daily front-end combat series full source code can be downloaded from github:

https://github.com/comehope/front-end-daily-challenges

Code Reading

Define dom, a container called a sky, which contains a sun and a moon element elements:

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

Draw the sky:

body {
    margin: 0;
}

.sky {
    width: 100vw;
    height: 100vh;
    background-color: skyblue;
}

Draw Sun:

.sky {
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
}

.sun {
    position: absolute;
    width: 50vmin;
    height: 50vmin;
    border-radius: 50%;
    background-color: gold;
}

Draw Moon:

.moon {
    position: absolute;
    width: 50vmin;
    height: 50vmin;
    border-radius: 50%;
    background-color: slategray;
    transform: translateX(-55vmin);
}

Changes in the definition of the sky, the day comes eclipse will darken the sky:

@keyframes animate-sky {
    50% {
        background-color: black;
    }
}

Changes in the definition of the sun, although the sun comes the same day eclipse will be blocked, but still revealing Halo:

@keyframes animate-sun {
    50% {
        box-shadow: 0 0 5em 1em white;
    }
}

Animation definition of the moon, when it moved to the sun and overlapping position, because there is no light, it can not see the color of the:

@keyframes animate-moon {
    from {
        transform: translateX(-100vmin);
    }

    50% {
        background-color: black;
    }

    to {
        transform: translateX(100vmin);
    }
}

The animation to the elements:

.sky,
.sun,
.moon {
    animation: 10s linear infinite;
}

.sky {
    animation-name: animate-sky;
}

.sun {
    animation-name: animate-sun;
}

.moon {
    animation-name: animate-moon;
}

Finally, the scroll bar is hidden:

.sky {
    overflow: hidden;
}

We're done!