【前端Talkking】CSS系列-紅月亮、藍月亮、X月亮，仍是漸變月亮好

時間 2019-11-06

原文原文鏈接

1.寫在前面

這兩天，你們必定是被紅月亮刷屏了吧？咱們都被下面漂亮的月亮迷倒了吧？
css

哈哈，你們清醒清醒，那麼漂亮的月亮，你們有沒有想過咱們的css能夠搞定任意顏色的月亮呢？答案是：確定能夠的。那麼今天就給你們講講任意顏色的月亮怎麼實現：使用線性漸變linear-gradient，so easy!若是對這個屬性不熟悉的，能夠先看我以前寫的關於線性漸變的文章【前端Talkking】CSS系列-css3之線性漸變初探。html

2.如何實現

其實很簡單,假設咱們有如下的基礎圖片：
前端

而後咱們有以下html代碼css3

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div class="demo"></div>
</body>
</html>

<style>
    .demo{
        width: 290px;
        height: 290px;
        border-radius: 50%;
        background:  url(./moon3.png) no-repeat;
    }
</style>

而後利用css背景的可重複性，修改css中的background代碼以下：segmentfault

background: linear-gradient(to bottom left, #cd0000, rgba(255,255,255,0)), url(./moon3.png) no-repeat;

此時就能夠實現紅月亮了：
微信

若是想實現其餘顏色的月亮，直接修改linear-gradient中的漸變顏色便可，即箭頭指向的顏色：
url

下面是做者修改顏色實現的幾種不一樣顏色的效果：

spa

是否是很酷？這樣咱們就不須要在寒冷的冬天等待紅月亮了，也不用再擔憂多少年一遇的月亮了，想什麼顏色的月亮，就能夠在電腦上分分鐘實現。3d

3.寫在最後

這篇文章很短，也沒有特別的難點，若是對linear-gradient比較熟悉，分分鐘就能夠實現，關鍵是思路。這就告訴咱們了CSS很強大，多思考，多動腦，不少酷炫的效果咱們本身均可以實現的。
圖片左側有黑色的部分，是由於截圖的緣由，這裏只是跟你們講解這個思路。
你們有什麼問題能夠在評論區留言。感謝閱讀，你們晚安。code

ps:今天是部門職級晉升成功的老闆們請客吃飯，在等餐的過程當中，跟同事聊起了紅月亮的事，同事開玩笑說，你能夠用你前幾天分享的漸變實現紅月亮效果呀，要什麼自行車？同事一句話提醒了我，回到家10點多了，打開電腦，試了下，用線性漸變確實能夠實現紅月亮的的效果。發了個朋友圈就洗洗睡了，可是怎麼睡都睡不着，因而爬起來把這個記下來跟你們分享下。

碰見了，不妨關注下個人微信公衆號「前端Talkking」

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。