中秋獻禮,分享一個CSS日地月公轉動畫效果!
阿新 • • 發佈:2021-09-15
中秋節快到了,下面本篇文章給大家分享一個純CSS實現的日地月公轉動畫效果,開啟快來學習一下!
為了這次中秋活動,我也算是苦思冥想了兩天,終於想到了一個用 HTML+CSS 模擬日地月的公轉。
我們都知道中秋的月亮又大又圓,是因為太陽地球月亮在公轉過程中處在了一條直線上,地球在中間,太陽和月球分別在地球的兩端,這天的月相便是滿月。這段可以略過,是為了跟中秋扯上關係。
但因為我根本沒咋學過前端,這兩天惡補了一下重學了 flexbox 和 grid ,成果應該說還挺好看(如果我的審美沒有問題的話)。
配色我挺喜歡的,希望你也喜歡。
HTML
重點是CSS,HTML放上三個 div 就ok了。
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"/> <title>拼多多培訓</title> <link href="simulation.css" rel="stylesheet"/> </head> <body> <h1>拼多多培訓</h1> <figure> <div></div> <div> <div></div> </div> </figure> </figure> </body> </html>
背景和文字
匯入我最喜歡的 Lobster 字型,然後設為白色,字型細一點。
@import url("https://fonts.googleapis.com/css2?family=Lobster&display=swap"); h1 { color: white; font-size: 60px; font-family: Lobster, monospace; font-weight: 100; }
背景隨便找了一個偏黑紫色,然後把畫的內容設定到中間。
body { margin: 0; height: 100vh; display: flex; align-items: center; justify-content: center; background-color: #2f3141; } .container { font-size: 10px; width: 40em; height: 40em; position: relative; display: flex; align-items: center; justify-content: center; }
日地月動畫
眾所周知:地球繞著太陽轉,月球繞著地球轉。
我們畫的是公轉,太陽就直接畫出來再加個陰影高光,月亮地球轉就可以了。
最重要的其實是配色(文章末尾有推薦網站),我實驗好長時間的配色,最終用了三個漸變色來表示日地月
日: linear-gradient(#fcd670, #f2784b); 地: linear-gradient(#19b5fe, #7befb2); 月: linear-gradient(#8d6e63, #ffe0b2);
CSS 應該難不到大家,隨便看看吧。
軌道用到了 border,用銀色線條當作公轉的軌跡。
動畫用到了自帶的 animation ,每次旋轉一週。
.sun { position: absolute; width: 10em; height: 10em; background: linear-gradient(#fcd670, #f2784b); border-radius: 50%; box-shadow: 0 0 8px 8px rgba(242, 120, 75, 0.2); } .earth { --diameter: 30; --duration: 36.5; } .moon { --diameter: 8; --duration: 2.7; top: 0.3em; right: 0.3em; } .earth,.moon { position: absolute; width: calc(var(--diameter) * 1em); height: calc(var(--diameter) * 1em); border-width: 0.1em; border-style: solid solid none none; border-color: silver transparent transparent transparent; border-radius: 50%; animation: orbit linear infinite; animation-duration: calc(var(--duration) * 1s); } @keyframes orbit { to { transform: rotate(1turn); } } .earth::before { --diameter: 3; --color: linear-gradient(#19b5fe, #7befb2); --top: 2.8; --right: 2.8; } .moon::before { --diameter: 1.2; --color: linear-gradient(#8d6e63, #ffe0b2); --top: 0.8; --right: 0.2; } .earth::before, .moon::before { content: ""; position: absolute; width: calc(var(--diameter) * 1em); height: calc(var(--diameter) * 1em); background: var(--color); border-radius: 50%; top: calc(var(--top) * 1em); right: calc(var(--right) * 1em); }
總結
參加個活動真不容易,不過前端還是挺好玩的。
以上就是中秋獻禮,分享一個CSS日地月公轉動畫效果!的詳細內容。(拼多多培訓)