1.写在前面
这两天，大家一定是被红月亮刷屏了吧？我们都被下面漂亮的月亮迷倒了吧？
linear-gradient，so easy!如果对这个属性不熟悉的，可以先看我之前写的关于线性渐变的文章
【前端Talkking】CSS系列-css3之线性渐变初探。
2.如何实现
其实很简单,假设我们有以下的基础图片：
然后我们有如下html代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div class="demo"></div>
</body>
复制代码<style>
.demo{
width: 290px;
height: 290px;
border-radius: 50%;
background: url(./moon3.png) no-repeat;
}
</style>
复制代码然后利用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」
9300
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
