CSS3单元素实现响应式日月食动画

Single element responsive solar eclipse

css3, sun, moon

《aframe.js 3d拼图代码详解》作品已被踏得网收录！

第三方库
作品简介 2410
作品推荐
使用帮助
常用链接

HTML
CSS
JavaScript
Result

编译

JavaScript

编译

CSS

body {
    height: 100vh;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    background: powderblue;
    -webkit-animation: sky 20s linear infinite;
    animation: sky 20s linear infinite;
}
Sun {
    width: 50vmin;
    height: 50vmin;
    border-radius: 50%;
    box-shadow: 52.5vmin 0 2.5vmin 0 gold;
    -webkit-transform: translateX(-105%);
    transform: translateX(-105%);
    -webkit-animation: eclipse 20s linear infinite;
    animation: eclipse 20s linear infinite;
}
@-webkit-keyframes sky {
    10%, 90% {
        background: powderblue;
    }
    45%,
    55% {
        background: #111320;
    }
}
@keyframes sky {
    10%, 90% {
        background: powderblue;
    }
    45%,
    55% {
        background: #111320;
    }
}
@-webkit-keyframes eclipse {
    33.333333333% {
        box-shadow: 17.5vmin 0 2.5vmin 0 gold;
    }
    50% {
        box-shadow: 0 0 7.5vmin 0 orangered;
    }
    66.666666666% {
        box-shadow: -17.5vmin 0 2.5vmin 0 gold;
    }
    to {
        -webkit-transform: translateX(105%);
        transform: translateX(105%);
        box-shadow: -52.5vmin 0 2.5vmin 0 gold;
    }
}
@keyframes eclipse {
    33.333333333% {
        box-shadow: 17.5vmin 0 2.5vmin 0 gold;
    }
    50% {
        box-shadow: 0 0 7.5vmin 0 orangered;
    }
    66.666666666% {
        box-shadow: -17.5vmin 0 2.5vmin 0 gold;
    }
    to {
        -webkit-transform: translateX(105%);
        transform: translateX(105%);
        box-shadow: -52.5vmin 0 2.5vmin 0 gold;
    }
}

HTML

Single element responsive solar eclipse

css3, sun, moon

编辑器支持Emmet

快捷键

Single element responsive solar eclipse

css3, sun, moon

CSS3单元素实现一个常用的鼠标滚动提示动画图标

15个纯CSS实现的响应式土豪金星球类应用动画图标

编辑器支持Emmet

快捷键

语言：

语言：

导入代码模板：