码迷,mamicode.com
首页 > Web开发 > 详细

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

时间:2019-02-16 20:49:02      阅读:203      评论:0      收藏:0      [点我收藏+]

标签:class   rom   key   tps   元素   animate   transform   from   共同点   

原文地址: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);
    }
}

 

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

标签:class   rom   key   tps   元素   animate   transform   from   共同点   

原文地址:https://www.cnblogs.com/FlyingLiao/p/10389110.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!