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>总结
儿时，时常看我家人在书桌上，挥洒笔墨，绘制出一幅幅画卷。但是我没有绘画天赋，算是生平一件憾事。
自从能用代码实现各种图案，我便喜爱的不能自拔。这次，我绘制出了花卉图，仿佛回到了老家的那张很大很大的书桌前，这次执笔的人换成了我自己。
没想到有一天，技术帮我圆了一个做了很久已经几近放弃的梦。
作者：非职业「传道授业解惑」的开发者叶一一
简介：「趣学前端」、「CSS畅想」系列作者，华夏美食、国漫、古风重度爱好者，刑侦、无限流小说初级玩家。
如果看完文章有所收获，欢迎点赞👍 | 收藏⭐️ | 留言📝。
- 点赞
- 收藏
- 关注作者
评论（0）