【前端Talkking】CSS系列-红月亮、蓝月亮、X月亮，还是渐变月亮好

JinB 发布于2019-08-29 14:21 / 2574人阅读

摘要：写在前面这两天，大家一定是被红月亮刷屏了吧我们都被下面漂亮的月亮迷倒了吧哈哈，大家清醒清醒，那么漂亮的月亮，大家有没有想过我们的可以搞定任意颜色的月亮呢答案是肯定可以的。

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」

专线服务私有云蓝月亮学前端好还是java好学前端好还是后端好学web前端好还是后端好

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/113068.html

用canvas画一轮明月，夜空与流星

摘要：今天是中秋节，于是突发奇想，欸不如用来画一画月亮吧。径向渐变这是月亮的类，主要用到了里的径向渐变效果。然后整体倾角度，并且填充时用上一个径向渐变，就可以相当完美的达到流行尾巴那样渐行渐远渐模糊的样子。今天是中秋节，于是突发奇想，欸不如用canvas来画一画月亮吧。于是一副用canvas画出的星空就这样诞生了。 Demo 在这里我用了ES6语法，星星，月亮和流星都单独写成了一个mod...

VioletJack 2019-08-21 14:27 评论0 收藏0
前端每日实战：55# 视频演示如何用纯 CSS 创作一个太阳、地球、月亮的运转模型

摘要：源代码下载每日前端实战系列的全部源代码请从下载代码解读定义，容器中包含个元素居中显示定义容器尺寸画出太阳画出地球和月球的轨迹用伪元素画出地球和月球设置运转动画效果最后，隐藏可能会出现在容器外的部分大功告成 showImg(https://segmentfault.com/img/bVbcpRv?w=500&h=500); 效果预览按下右侧的点击预览按钮可以在当前页面预览，点击链接可以...

SolomonXie 2019-08-02 16:02 评论0 收藏0
前端每日实战：55# 视频演示如何用纯 CSS 创作一个太阳、地球、月亮的运转模型

摘要：源代码下载每日前端实战系列的全部源代码请从下载代码解读定义，容器中包含个元素居中显示定义容器尺寸画出太阳画出地球和月球的轨迹用伪元素画出地球和月球设置运转动画效果最后，隐藏可能会出现在容器外的部分大功告成 showImg(https://segmentfault.com/img/bVbcpRv?w=500&h=500); 效果预览按下右侧的点击预览按钮可以在当前页面预览，点击链接可以...

zhigoo 2019-08-05 14:11 评论0 收藏0
前端每日实战：55# 视频演示如何用纯 CSS 创作一个太阳、地球、月亮的运转模型

摘要：源代码下载每日前端实战系列的全部源代码请从下载代码解读定义，容器中包含个元素居中显示定义容器尺寸画出太阳画出地球和月球的轨迹用伪元素画出地球和月球设置运转动画效果最后，隐藏可能会出现在容器外的部分大功告成 showImg(https://segmentfault.com/img/bVbcpRv?w=500&h=500); 效果预览按下右侧的点击预览按钮可以在当前页面预览，点击链接可以...

沈建明 2019-08-30 15:53 评论0 收藏0
Chrome 小恐龙游戏源码探究七 -- 昼夜模式交替

摘要：文章首发于我的博客前言上一篇文章小恐龙游戏源码探究六记录游戏分数实现了游戏分数最高分数的记录和绘制。这一篇文章中将实现昼夜模式交替的的效果。原来的游戏中，昼夜交替每米触发一次，这里为了演示，改成了米触发一次。文章首发于我的 GitHub 博客前言上一篇文章：《Chrome 小恐龙游戏源码探究六 -- 记录游戏分数》实现了游戏分数、最高分数的记录和绘制。这一篇文章中将实现昼夜模式...

curried 2019-08-23 17:09 评论0 收藏0