灵感来源
之前刷到了盛开的双色睡莲，虽然是拍摄的画面，但是也被它的美丽惊艳到了。它的寓意也非常好，好运连连，好事成双。
所以七夕那天，我想以托物寄情的方式，解相思之念，第一个想到的就是双色睡莲。正好最近CSS用很熟练，所以也就自然而然的决定用CSS绘制莲花。
第一次尝试
最开始我想绘制一副荷塘月色，流水潺潺，气朗风清，莲叶随波逐流，莲花随风摇曳。但是绘制了一部分，发现布局掌握不好，整体效果一般，没有绘制出自己满意的画面。
一般我遇到了瓶颈，会做点别的事情转换一下思维，所以我将关注点从睡莲转移到了「趣学前端」系列上，暂时不去想睡莲的事。
转换思路
休息的间隙，我突然来了灵感，荷塘的范围比较大，大面积的画面布局本来就不是我的强项。如果将范围缩小，不就回到我的主场了吗？要知道我可是掌上游戏机绘制小能手，小型场景创意达人。
我开始思考，莲花以什么样是方式展示会衬托它的清新淡雅，濯而不妖。答案是绘制到画卷上，可远观而不可亵玩焉。
于是，我绘制了一副双色莲花图，以便七夕寄情。
双色莲花图
在线预览
完整代码放到在线预览平台，可以查看完整代码并体验效果。
完整效果
一副画框
为了绘制一幅古韵画框，我到网上寻找素材，最后在美图秀秀上找到一幅我很喜欢的画框。
- 画框左右两侧没有封口的边框，其实是用四条线段实现的， 线段加了渐变的背景色增加了木质感；
- 四个角，每个角是一对层叠的矩形，作为画框的点缀。一般层叠的效果，会通过设置z-index的值区分上下的关系；
- 内层，每个角绘制了一对带线段的矩形，矩形尾部的线段通过伪类的方式实现。
这样，一幅古香古色的画框就完成了。
<divclass='huakuang'><divclass='edge edge1'></div><divclass='edge edge2'></div><divclass='edge edge3'></div><divclass='edge edge4'></div><divclass='rectangle rectangle1'></div><divclass='rectangle rectangle2'></div><divclass='rectangle rectangle3'></div><divclass='rectangle rectangle4'></div><divclass='rectangle rectangle11'></div><divclass='rectangle rectangle12'></div><divclass='rectangle rectangle13'></div><divclass='rectangle rectangle14'></div><divclass='rectangle rectangle21'></div><divclass='rectangle rectangle22'></div><divclass='rectangle rectangle23'></div><divclass='rectangle rectangle24'></div><divclass='rectangle rectangle31'></div><divclass='rectangle rectangle32'></div><divclass='rectangle rectangle33'></div><divclass='rectangle rectangle34'></div></div>
两行诗词
绞尽脑汁的想了两句诗，托物寄情，以解相思。
雨过睡莲双重色，遥望牵牛倍思君
文字使用text-shadow属性设置了阴影效果。
<divclass='poetry'><divclass='poetry-line'>雨过睡莲双重色</div><divclass='poetry-line poetry-line-sec'>遥望牵牛倍思君</div></div>
插花的美与雅
- 花瓶借鉴汝窑的蕴润秀美，通身只有淡雅的颜色没有其他装饰；
- 花瓶中，一朵嫣红鹅黄的双色莲花，一片翠绿的荷叶。有那么点“一花一世界，一叶一菩提”的禅意。
<divclass='lotos'><divclass='flower'><divclass='petal petal1'></div><divclass='petal petal2'></div><divclass='petal petal3'></div><divclass='petal petal4'></div><divclass='petal petal5'></div><divclass='petal petal6'></div><divclass='petal petal7'></div><divclass='petal petal8'></div><divclass='petal petal9'></div></div><divclass='leaf'></div><divclass='stem stem1'></div><divclass='stem stem2'></div><divclass='vase'></div></div>
彩蝶蹁跹
- 一只振翅的蝴蝶，被莲花的清香吸引，落在莲花上，久久不曾离开；
- 蝴蝶振翅的效果我用了一个比较简单的方式，为父容器butterfly设置了一个沿Y轴旋转的动画，旋转的值从大到小，变有了闪动翅膀的动画效果。
<divclass='butterfly'><divclass='antenna antenna-left'></div><divclass='antenna antenna-right'></div><divclass='head'></div><divclass='body'></div><divclass='wing wing-left'><divclass='top'></div><divclass='bottom'></div></div><divclass='wing wing-right'><divclass='top'></div><divclass='bottom'></div></div></div>
总结
儿时，时常看我家人在书桌上，挥洒笔墨，绘制出一幅幅画卷。但是我没有绘画天赋，算是生平一件憾事。
自从能用代码实现各种图案，我便喜爱的不能自拔。这次，我绘制出了花卉图，仿佛回到了老家的那张很大很大的书桌前，这次执笔的人换成了我自己。
没想到有一天，技术帮我圆了一个做了很久已经几近放弃的梦。真的应了那句歌词
有梦想谁都了不起
