36纯 CSS 动画原理，在页面上表现日蚀现象

36纯 CSS 动画原理，在页面上表现日蚀现象

原文地址：https://segmentfault.com/a/1190000015070543

感想： 动画，背景颜色

HTML code:

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

CSS code:

html, body {
    margin: 0;
    padding: 0;
}
.sky{
    position: relative;
    width: 100vw;
    height: 100vh;
    /* 让子元素垂直居中 */
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: skyblue;
    animation: animate-sky 10s linear infinite;
    /* 隐藏滚动条 */
    overflow: hidden;
}
/* 太阳与月亮共同点 */
.sun,.moon{
    position: absolute;
    width: 50vmin;
    height: 50vmin;
    border-radius: 50%;
    animation: 10s linear infinite;
}
/* 太阳 */
.sun{
    background-color: gold;
    animation-name: animate-sun;
}
/* 月亮 */
.moon{
    background-color: slategray;
    animation-name: animate-moon;
   /*  transform: translateX(-55vmin);*/
}
@keyframes animate-sky{
    50%{
        background-color: black;
    }
}
@keyframes animate-sun{
    50%{
        box-shadow: 0 0 5em 1em white;
    }
}
@keyframes animate-moon{
    from{
        transform: translateX(-100vmin);
    }
    50%{
        background-color: black;
    }
    to{
        transform: translateX(100vmin);
    }
}

 

posted on 2019-02-16 20:27  人生与戏 阅读( ...) 评论( ...) 编辑 收藏

转载于:https://www.cnblogs.com/FlyingLiao/p/10389110.html