在这里，提前祝大家中秋节快乐！！！
祝福大家都能够美美的过上一个中秋节，遇不到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; } }
嫦娥所用的小图片：
🪂、总结
这个小小的嫦娥奔月尽管内容不多，但因为我根本没怎么花过心思在前端上，所以很多东西都是边查边写的。
在这里我把用到的一些工具分享给大家哈😁
RGB颜色值和十六进制颜色码互转A Single Div 一个富有创意的div项目
Palettes | Flat UI Colors 🎨 280 handpicked colors ready for COPY & PASTE 配色搭配
Paletton - The Color Scheme Designer
补充：SVG画完按CTRL+U即查看路径
我最喜欢逛的是seeseed，我平常找图、字体、配色、工具、灵感，很多时候也会来这里逛逛，审美很舒服，也没有广告，推荐的网站或者社区，有些不是国内的，可能需要科学上网才能访问。
咱们掘金大佬是长得又帅，说话又好听，我想各位大佬赏个赞应该没问题吧，我就想拿个优秀文章奖哈👨💻🚀
