天仙子·水调数声持酒听

【宋】张先

水调数声持酒听，午醉醒来愁未醒。送春春去几时回镜，伤流景，往事后期空记省。
沙上并禽池上暝，云破月来花弄影。重重帘幕密遮灯，风不定，人初静，明日落红应满径。

昨天七夕，下班在地铁里面看到了各种恩爱撒狗粮的，不禁想起当年情窦初开的时候，非常喜欢宋词。而张先，因为“影”字用的好，被称为“张三影”，这首词就是三影之一（不是火影）。回到家，小孩和老婆都睡了（996害死人啊），但心中的火却旺的很，右手也不安份。我想到今天多少对情侣在那啥，我却只能一个人，心中躁动不已，艺术之魂熊熊燃烧，我控制住右手，强行挪开了点击某hub 站的冲动，点开了另一个某hub 站，开始了我的艺术创作。

1、月来

用svg做个月亮还是很简单的，只要画一个发光的大圆饼就好了，上代码。

上帝说，要有光，那就来个光

用feGaussianBlur模糊后的作为月亮的光，和大圆饼合起来，就是一个发光的月亮了

这个月亮圆也很圆，亮也很亮，但是作为一个现代人，我知道月亮上是有环形山的，这么洁白无暇的月亮太假了，所以还要加点黑影。

看过前面做云文章的朋友都知道，feTurbulence和feDisplacementMap的组合用来做纹理和腐蚀效果是很好的，这里也用来做月亮的黑影，这里需要说明一个知识点，这个问题之前其实困扰了我很久。

我们使用filter特效的时候，如果效果超出了图形本身的矩形框范围，那么效果会在矩形框范围直接切断，比如上面这个greymoon,显示出来是这样的

明显可以看出左边切掉了一块，非常影响效果，去掉边界的限制在哪呢filter的属性，这个例子里面，我改成这样就好了

把filter的width，hegith加宽加高，单这样还不行，因为width,height只能影响图形的右边和下边，结果效果只是这样

可以看到，左边和上边仍然被无情的截取了，所以必须把x,y参数加上去，因为是向左和向上，在坐标原点前，所以是负数，最终的效果如下

最后把阴影加到大月亮上去，就能看到最终效果了

一个比较真实的月亮就做好了（不要和我提阴影和真实的月面情况不一样，我又不是华为手机的AI拍摄，能自动把真实月面给P出来）。

2、云破

月亮做出来了，我们开始做云。之前在做云的文章里面其实已经很详细的讲了做云的方法，所以我这边就不详细讲了。不过这次我们搞点新花样，不用css的box-shadow来做，直接使用svg来做，代码会更简洁。

最后的效果如下

3、花弄影

在这里我们先需要一堵墙，否则影子在哪显示呢，所以我就上花瓣 找了一堵墙过来。图片地址在这里

针对原图我做了一点处理，主要是把墙面搞暗了一些，把图片的天空部分变成了透明，方便显示月亮和云，使用的同样是svg的图片显示

然后是花影，要有花影，首先得有花，同样的，我又从花瓣 弄来了一束花。图片地址忘了存，找不到了┐(?～?)┌

现在关键来了，花弄影主要是影，我们开始光影的魔法。

先介绍下这几个filter：

feoffset：该输入图像作为一个整体，在属性和属性的值指定了它的偏移量。说白了就是把原图在离开dx和dy的距离外复制一个一样的图像，活脱脱的拷贝魔法，这就是filter界的旗木卡卡西啊。

feGaussianBlur：老朋友，干模糊化的，略

最后看到的是这样

对话录：

画外音：是不是这样就算做好了

我：当然没有，你没发现我选的这个墙不是平面的吗

画外音：那又怎样

我：这样影子打上去应该是斜的，不是这样平平的影子

画外音：为啥你不选个正平墙的图呢

我：花瓣上没找到啊…

画外音：你为啥要执着于这个影子效果呢，用现在这个就行了

我：不行，我是个严谨的艺术家，我的影子要真实，真实，再真实

画外音：那刚才月亮的阴影你咋不追求真实的月面阴影呢

我：…..，警察叔叔，就是这个声音给我打的诈骗电话，马上抓他去坐牢。

我：让你和我抬杠

画外音：算你狠…

——————————————————-我是分割线———————————————-

我们需要把花的图片和花的影子分开处理，现在我们把生成影子的花弄出屏幕外

通过x的设置，把花的图像移到 屏幕外，只留下影子

这里要讲下transform：

transform和上面这些filter不同，是SVG元素的属性。作用是设置svg元素的变形，包括位移, 旋转, 缩放, 斜切

4、成品

当我们把月亮，云、院墙和花影组合起来，就可以看到最终的效果了

源码地址

在线围观

相关资源：…智慧农业信息化建设解决方案-管理软件文档类资源-CSDN文库