「CSS畅想」七夕寄情，我绘制了一副双色莲花图

灵感来源

之前刷到了盛开的双色睡莲，虽然是拍摄的画面，但是也被它的美丽惊艳到了。它的寓意也非常好，好运连连，好事成双。

所以七夕那天，我想以托物寄情的方式，解相思之念，第一个想到的就是双色睡莲。正好最近CSS用很熟练，所以也就自然而然的决定用CSS绘制莲花。

第一次尝试

最开始我想绘制一副荷塘月色，流水潺潺，气朗风清，莲叶随波逐流，莲花随风摇曳。但是绘制了一部分，发现布局掌握不好，整体效果一般，没有绘制出自己满意的画面。

一般我遇到了瓶颈，会做点别的事情转换一下思维，所以我将关注点从睡莲转移到了「趣学前端」系列上，暂时不去想睡莲的事。

转换思路

休息的间隙，我突然来了灵感，荷塘的范围比较大，大面积的画面布局本来就不是我的强项。如果将范围缩小，不就回到我的主场了吗？要知道我可是掌上游戏机绘制小能手，小型场景创意达人。

我开始思考，莲花以什么样是方式展示会衬托它的清新淡雅，濯而不妖。答案是绘制到画卷上，可远观而不可亵玩焉。

于是，我绘制了一副双色莲花图，以便七夕寄情。

双色莲花图

在线预览

完整代码放到​​在线预览平台​​，可以查看完整代码并体验效果。

完整效果

一副画框

为了绘制一幅古韵画框，我到网上寻找素材，最后在美图秀秀上找到一幅我很喜欢的画框。

• 画框左右两侧没有封口的边框，其实是用四条线段实现的， 线段加了渐变的背景色增加了木质感；
• 四个角，每个角是一对层叠的矩形，作为画框的点缀。一般层叠的效果，会通过设置z-index的值区分上下的关系；
• 内层，每个角绘制了一对带线段的矩形，矩形尾部的线段通过伪类的方式实现。

这样，一幅古香古色的画框就完成了。

<div class='huakuang'>
  <div class='edge edge1'></div>
  <div class='edge edge2'></div>
  <div class='edge edge3'></div>
  <div class='edge edge4'></div>
  <div class='rectangle rectangle1'></div>
  <div class='rectangle rectangle2'></div>
  <div class='rectangle rectangle3'></div>
  <div class='rectangle rectangle4'></div>
  <div class='rectangle rectangle11'></div>
  <div class='rectangle rectangle12'></div>
  <div class='rectangle rectangle13'></div>
  <div class='rectangle rectangle14'></div>
  <div class='rectangle rectangle21'></div>
  <div class='rectangle rectangle22'></div>
  <div class='rectangle rectangle23'></div>
  <div class='rectangle rectangle24'></div>
  <div class='rectangle rectangle31'></div>
  <div class='rectangle rectangle32'></div>
  <div class='rectangle rectangle33'></div>
  <div class='rectangle rectangle34'></div>
</div>

两行诗词

绞尽脑汁的想了两句诗，托物寄情，以解相思。

雨过睡莲双重色，遥望牵牛倍思君

文字使用text-shadow属性设置了阴影效果。

<div class='poetry'>
  <div class='poetry-line'>雨过睡莲双重色</div>
  <div class='poetry-line poetry-line-sec'>遥望牵牛倍思君</div>
</div>

插花的美与雅

• 花瓶借鉴汝窑的蕴润秀美，通身只有淡雅的颜色没有其他装饰；
• 花瓶中，一朵嫣红鹅黄的双色莲花，一片翠绿的荷叶。有那么点“一花一世界，一叶一菩提”的禅意。

<div class='lotos'>
  <div class='flower'>
    <div class='petal petal1'></div>
    <div class='petal petal2'></div>
    <div class='petal petal3'></div>
    <div class='petal petal4'></div>
    <div class='petal petal5'></div>
    <div class='petal petal6'></div>
    <div class='petal petal7'></div>
    <div class='petal petal8'></div>
    <div class='petal petal9'></div>
  </div>
  <div class='leaf'></div>
  <div class='stem stem1'></div>
  <div class='stem stem2'></div>
  <div class='vase'></div>
</div>

彩蝶蹁跹

• 一只振翅的蝴蝶，被莲花的清香吸引，落在莲花上，久久不曾离开；
• 蝴蝶振翅的效果我用了一个比较简单的方式，为父容器butterfly设置了一个沿Y轴旋转的动画，旋转的值从大到小，变有了闪动翅膀的动画效果。

<div class='butterfly'>
  <div class='antenna antenna-left'></div>
  <div class='antenna antenna-right'></div>
  <div class='head'></div>
  <div class='body'></div>
  <div class='wing wing-left'>
    <div class='top'></div>
    <div class='bottom'></div>
  </div>
  <div class='wing wing-right'>
    <div class='top'></div>
    <div class='bottom'></div>
  </div>
</div>

完整UI

总结

儿时，时常看我家人在书桌上，挥洒笔墨，绘制出一幅幅画卷。但是我没有绘画天赋，算是生平一件憾事。

自从能用代码实现各种图案，我便喜爱的不能自拔。这次，我绘制出了花卉图，仿佛回到了老家的那张很大很大的书桌前，这次执笔的人换成了我自己。

没想到有一天，技术帮我圆了一个做了很久已经几近放弃的梦。真的应了那句歌词

有梦想谁都了不起