中秋我用CSS写了个嫦娥奔月

为了这个中秋创意我觉得我自己也是绞尽脑汁了，看到那个中秋创意的选题，我瞧了瞧Python 画图，不会，又看爬虫，行不通（乱爬听说会被邀请喝咖啡），前端页面制作，我都没写过几个😂，越看越难受啊，就没啥能和我扯上关系的。

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

最后成果如下图：

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

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

一、结构

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

月亮

流星

随处闪烁的星星

移动的嫦娥

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

二、HTML

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

<div class="container"><div class="moon"></div><div class="change"><img src="10.png" 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;} }

嫦娥所用的小图片：

八、工具

这个小小的嫦娥奔月尽管内容不多，但因为我根本没怎么花过心思在前端上，所以很多东西都是边查边写的。

在这里我把用到的一些工具分享给大家哈😁

W3C School 复习CSS动画

RGB颜色值和十六进制颜色码互转
A Single Div 一个富有创意的div项目

Palettes | Flat UI Colors 🎨 280 handpicked colors ready for COPY & PASTE 配色搭配

Paletton - The Color Scheme Designer

seeseed 无穷设计可能

智能在线抠图免费下载

SVG 动画轨迹

补充：SVG画完按CTRL+U即查看路径

我最喜欢逛的是seeseed，我平常找图、字体、配色、工具、灵感，很多时候也会来这里逛逛，审美很舒服，也没有广告，推荐的网站或者社区，有些不是国内的，可能需要科学上网才能访问。

咱们掘金大佬是长得又帅，说话又好听，我想各位大佬赏个赞应该没问题吧，我就想拿个优秀文章奖哈👨‍💻🚀

总结

以上是生活随笔为你收集整理的中秋我用CSS写了个嫦娥奔月的全部内容，希望文章能够帮你解决所遇到的问题。

如果觉得生活随笔网站内容还不错，欢迎将生活随笔推荐给好友。