💗中秋💗CSS动画 | 嫦娥奔月-阿里云开发者社区

💗中秋💗CSS动画 | 嫦娥奔月

2024-01-05 69

版权

本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。

简介： 💗中秋💗CSS动画 | 嫦娥奔月

在这里，提前祝大家中秋节快乐！！！

祝福大家都能够美美的过上一个中秋节，遇不到bug；抢到回家的票；陪陪女朋友；陪陪家人；吃吃月饼啦！！！

为了这个中秋创意我觉得我自己也是绞尽脑汁了，看到那个中秋创意的选题，我瞧了瞧Python 画图，不会，又看爬虫，行不通（乱爬听说会被邀请喝咖啡）。

前端页面制作，我都没写过几个😂，越看越难受啊，就没啥能和我扯上关系的。

最后实在无路可走了，老老实实复习CSS动画，一下一下的调，色彩搭配，翻各种网站。做完还是让人蛮开心的😀

最后成果如下图：

这个简单的页面在很大程度上还是还原了我内心的想法，有些创意点没法实现，百度都不知道搜啥关键词😂，不足之处就是在于夜空的配色调不出来自己满意的。

代码演示可以查看我的CodePen：CSS嫦娥奔月

🚀、结构

页面结构主体大概就分为以下几点：

月亮
流星
随处闪烁的星星
移动的嫦娥

清楚构思之后，就特别简单了。

🛸、HTML

HTML非常简单，就是三个div搭配一张一张图片。

<div class="container">
    <div class="moon"></div>
    <div class="change">
        <img src="https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/c2afd3835f284892b3691681d0bb6d06~tplv-k3u1fbpfcp-zoom-1.image" 
        class="ico" 
        style="border: none;  width: 50px;height: 50px;">
    </div>
</div>

🚢、页面背景

主要是背景颜色难调，一开始拿qq截图去那种星空照片上取色，拿到的结果都是不尽人意，也看了不少色彩搭配网站，但是都没有找到一种合适的色调。

这最后的背景色，是慢慢调出来的，说多了都是泪。前端也是真的是不容易啊。

* {
    margin: 0;
    padding: 0;
}
.container {
    position: relative;
    width: 100vw;
    height: 100vh;
    background-color: #01050D;
}

🚁、月亮

月亮的动画做的蛮简单的，调成那么多帧是为了看起来更加平缓一下。也是一样心中美丽的颜色调不出来，最后就拿了这个色。脑海中原本想的能够做出一点点偏蓝又偏银白色的那种色调的，还希望能够作出纹理，但是学艺不精，还是没有能够做成啊。

.moon {
    width: 100px;
    height: 100px;
    border-radius: 50%;
    background-color: rgb(219, 207, 175);
    box-shadow: 0 0 60px #F5FFFA;
    position: absolute;
    left: 80%;
    top: 140px;
    animation: myMoon 3s linear;
}
@keyframes myMoon {
    0% {
        left: 78%;
        top: 130px;
        opacity: 0;
    }
    10% {
        left: 78.2%;
        top: 131px;
        opacity: 0.1;
    }
    20% {
        left: 78.4%;
        top: 132px;
        opacity: 0.2;
    }
    30% {
        left: 78.6%;
        top: 133px;
        opacity: 0.3;
    }
    40% {
        left: 78.8%;
        top: 134px;
        opacity: 0.4;
    }
    50% {
        left: 79%;
        top: 135px;
        opacity: 0.5;
    }
    60% {
        left: 79.2%;
        top: 136px;
        opacity: 0.6;
    }
    70% {
        left: 79.4%;
        top: 137px;
        opacity: 0.7;
    }
    80% {
        left: 79.6%;
        top: 138px;
        opacity: 0.8;
    }
    90% {
        left: 79.8%;
        top: 139px;
        opacity: 0.9;
    }
    100% {
        left: 80%;
        top: 140px;
        opacity: 1;
    }
}

🏍、流星

生成是拿简单的javascript代码生成的，重点主要是在于CSS的动画代码上。

<script>
//随机生成流星
for (var i = 0; i < 20; i++) {
    var lx = document.createElement('div')
    lx.className = 'meteor'
    lx.style.right = (Math.random() * 400 + 150) + 'px'
    lx.style.top = (Math.random() * 200 + 100) + 'px'
    lx.style.animationDelay = Math.random() * 3 * i + 's' //添加动画延迟时间
    document.body.appendChild(lx)
}
</script>

动画效果

流星的CSS代码

.meteor {
    width: 1px;
    display: block;
    position: absolute;
    background-color: transparent transparent transparent rgba(255, 255, 255, .5);
    opacity: 0;
    animation: meteor 4s linear infinite;
}
.meteor::after {
    content: '';
    display: block;
    border: 1px solid #fff;
    border-width: 0px 90px 2px 90px;
    border-color: transparent transparent transparent rgba(255, 255, 255, .5);
    transform: rotate(-45deg);
}
@keyframes meteor {
    0% {
        opacity: 0;
    }
    30% {
        opacity: 1;
    }
    100% {
        opacity: 0;
        transform: translate(-500px, 300px);
    }
}

🏎、随处闪烁的星星

同上哈。

<script>
var width = document.body.clientWidth - 20;
var height = document.body.clientHeight - 20;
//随机生成星星
for (var i = 0; i < 30; i++) {
    var img = document.createElement('div')
    img.className = 'star'
    img.style.left = Math.random() * width + 'px'
    img.style.top = Math.random() * height + 'px'
    img.style.animationDelay = Math.random() * 3 * i + 's' //添加动画延迟时间
    document.body.appendChild(img)
}
</script>

一样的哈。😁

.star {
    position: absolute;
}
.star::before {
    content: "★";
    display: block;
    position: absolute;
    left: 10px;
    top: 20px;
    width: auto;
    height: auto;
    color: #fff;
    -webkit-transform: scale(0.5);
    -moz-transform: scale(0.5);
    transform: scale(0.5);
    -webkit-animation: 1s starlight linear infinite;
    -moz-animation: 1s starlight linear infinite;
    animation: 1s starlight linear infinite;
    -webkit-animation-fill-mode: forwards -moz-animation-fill-mode forwards animation-fill-mode forwards
}
.star::after {
    content: "★";
    display: block;
    position: absolute;
    left: 40px;
    top: 120px;
    width: auto;
    height: auto;
    color: #fff;
    -webkit-transform: scale(0.5);
    -moz-transform: scale(0.5);
    transform: scale(0.5);
    -webkit-animation: 2s starlight linear infinite;
    -moz-animation: 2s starlight linear infinite;
    animation: 2s starlight linear infinite;
}
@-webkit-keyframes starlight {
    0% {
        -webkit-transform: scale(0.5);
    }
    50% {
        -webkit-transform: scale(0.3);
    }
    100% {
        -webkit-transform: scale(0.1);
    }
}
@-moz-keyframes starlight {
    0% {
        -moz-transform: scale(0.5);
    }
    50% {
        -moz-transform: scale(0.3);
    }
    100% {
        -moz-transform: scale(0.1);
    }
}
@keyframes starlight {
    0% {
        opacity: 0;
        transform: scale(0.5);
    }
    50% {
        opacity: 0.4;
        transform: scale(0.3);
    }
    100% {
        opacity: 0;
        transform: scale(0.1);
    }
}

🚝、嫦娥

这个嫦娥动画可能是写的最简单的了吧，原本心里还有些创意，但是不太会，实现不出来啦。

只能留在下周了，下次去请教一些大佬，帮我实现一下心里的想法。

.change {
    width: 50px;
    height: 50px;
    border: none;
    position: absolute;
    left: 81.8%;
    top: 169px;
    animation: myChange 8s linear;
}
@keyframes myChange {
    0% {
        left: 41.8%;
        top: 669px;
        opacity: 0;
    }
    1% {
        left: 42.8%;
        top: 629px;
        opacity: 0;
    }
    10% {
        left: 45.8%;
        top: 619px;
        opacity: 0.1;
    }
    20% {
        left: 49.8%;
        top: 569px;
        opacity: 0.2;
    }
    30% {
        left: 53.8%;
        top: 519px;
        opacity: 0.3;
    }
    40% {
        left: 57.8%;
        top: 469px;
        opacity: 0.4;
    }
    50% {
        left: 61.8%;
        top: 419px;
        opacity: 0.5;
    }
    60% {
        left: 65.8%;
        top: 369px;
        opacity: 0.6;
    }
    70% {
        left: 69.8%;
        top: 319px;
        opacity: 0.7;
    }
    80% {
        left: 73.8%;
        top: 269px;
        opacity: 0.8;
    }
    90% {
        left: 77.8%;
        top: 219px;
        opacity: 0.9;
    }
    100% {
        left: 81.8%;
        top: 169px;
        opacity: 1;
    }
}