中秋我用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; }四、月亮
月亮的動畫做的蠻簡單的，調成那么多幀是為了看起來更加平緩一下。也是一樣心中美麗的顏色調不出來，最后就拿了這個色。
腦海中原本想的能夠做出一點點偏藍又偏銀白色的那種色調的，還希望能夠作出紋理，但是學藝不精，還是沒有能夠做成啊。
五、流星
生成是拿簡單的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写了个嫦娥奔月的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： Idea中内置Translation插件
- 下一篇： Security 登录认证流程详细分析