資訊專欄INFORMATION COLUMN
摘要：寫在前面這兩天，大家一定是被紅月亮刷屏了吧我們都被下面漂亮的月亮迷倒了吧哈哈，大家清醒清醒，那么漂亮的月亮，大家有沒有想過我們的可以搞定任意顏色的月亮呢答案是肯定可以的。
1.寫在前面
這兩天，大家一定是被紅月亮刷屏了吧？我們都被下面漂亮的月亮迷倒了吧？
哈哈，大家清醒清醒，那么漂亮的月亮，大家有沒有想過我們的css可以搞定任意顏色的月亮呢？答案是：肯定可以的。那么今天就給大家講講任意顏色的月亮怎么實現：使用線性漸變linear-gradient，so easy!如果對這個屬性不熟悉的，可以先看我之前寫的關于線性漸變的文章【前端Talkking】CSS系列-css3之線性漸變初探。
2.如何實現其實很簡單,假設我們有以下的基礎圖片：
然后我們有如下html代碼
Title
然后利用css背景的可重復性，修改css中的background代碼如下：
background: linear-gradient(to bottom left, #cd0000, rgba(255,255,255,0)), url(./moon3.png) no-repeat;
此時就可以實現紅月亮了：
如果想實現其他顏色的月亮，直接修改linear-gradient中的漸變顏色即可，即箭頭指向的顏色：
下面是作者修改顏色實現的幾種不同顏色的效果：
是不是很酷？這樣我們就不需要在寒冷的冬天等待紅月亮了，也不用再擔心多少年一遇的月亮了，想什么顏色的月亮，就可以在電腦上分分鐘實現。
3.寫在最后這篇文章很短，也沒有特別的難點，如果對linear-gradient比較熟悉，分分鐘就可以實現，關鍵是思路。這就告訴我們了CSS很強大，多思考，多動腦，很多酷炫的效果我們自己都可以實現的。
圖片左側有黑色的部分，是因為截圖的原因，這里只是跟大家講解這個思路。
大家有什么問題可以在評論區留言。感謝閱讀，大家晚安。
ps:今天是部門職級晉升成功的老板們請客吃飯，在等餐的過程中，跟同事聊起了紅月亮的事，同事開玩笑說，你可以用你前幾天分享的漸變實現紅月亮效果呀，要什么自行車？同事一句話提醒了我，回到家10點多了，打開電腦，試了下，用線性漸變確實可以實現紅月亮的的效果。發了個朋友圈就洗洗睡了，但是怎么睡都睡不著，于是爬起來把這個記下來跟大家分享下。
遇見了，不妨關注下我的微信公眾號「前端Talkking」
文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。
轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/113068.html
摘要：今天是中秋節，于是突發奇想，欸不如用來畫一畫月亮吧。徑向漸變這是月亮的類，主要用到了里的徑向漸變效果。然后整體傾角度，并且填充時用上一個徑向漸變，就可以相當完美的達到流行尾巴那樣漸行漸遠漸模糊的樣子。 今天是中秋節，于是突發奇想，欸不如用canvas來畫一畫月亮吧。 于是一副用canvas畫出的星空就這樣誕生了。 Demo 在這里我用了ES6語法，星星，月亮和流星都單獨寫成了一個mod...
摘要：源代碼下載每日前端實戰系列的全部源代碼請從下載代碼解讀定義，容器中包含個元素居中顯示定義容器尺寸畫出太陽畫出地球和月球的軌跡用偽元素畫出地球和月球設置運轉動畫效果最后，隱藏可能會出現在容器外的部分大功告成 showImg(https://segmentfault.com/img/bVbcpRv?w=500&h=500); 效果預覽 按下右側的點擊預覽按鈕可以在當前頁面預覽，點擊鏈接可以...
摘要：源代碼下載每日前端實戰系列的全部源代碼請從下載代碼解讀定義，容器中包含個元素居中顯示定義容器尺寸畫出太陽畫出地球和月球的軌跡用偽元素畫出地球和月球設置運轉動畫效果最后，隱藏可能會出現在容器外的部分大功告成 showImg(https://segmentfault.com/img/bVbcpRv?w=500&h=500); 效果預覽 按下右側的點擊預覽按鈕可以在當前頁面預覽，點擊鏈接可以...
摘要：文章首發于我的博客前言上一篇文章小恐龍游戲源碼探究六記錄游戲分數實現了游戲分數最高分數的記錄和繪制。這一篇文章中將實現晝夜模式交替的的效果。原來的游戲中，晝夜交替每米觸發一次，這里為了演示，改成了米觸發一次。 文章首發于我的 GitHub 博客 前言 上一篇文章：《Chrome 小恐龍游戲源碼探究六 -- 記錄游戲分數》實現了游戲分數、最高分數的記錄和繪制。這一篇文章中將實現晝夜模式...
閱讀 2652·2021-09-09 09:33
閱讀 2810·2019-08-30 15:54
閱讀 2867·2019-08-30 14:21
閱讀 2356·2019-08-29 17:15
閱讀 3579·2019-08-29 16:13
閱讀 2759·2019-08-29 14:21
閱讀 3421·2019-08-26 13:25
閱讀 2028·2019-08-26 12:14
