年度实用技巧 | 七夕寄情，我绘制了一副双色莲花图

原创

叶一一

发布于 2025-01-31 12:44:54

10400

代码可运行

文章被收录于专栏：趣学前端趣学前端

运行总次数：0

代码可运行

灵感来源

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

今年的七夕，我想以托物寄情的方式，解相思之念，第一个想到的就是双色睡莲。正好最近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>

总结

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

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

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

有梦想谁都了不起。

原创声明：本文系作者授权腾讯云开发者社区发表，未经许可，不得转载。

如有侵权，请联系 cloudcommunity@tencent.com 删除。

腾讯技术创作特训营S11#重启人生

前端

原创声明：本文系作者授权腾讯云开发者社区发表，未经许可，不得转载。

如有侵权，请联系 cloudcommunity@tencent.com 删除。

腾讯技术创作特训营S11#重启人生

前端

#前端开发

登录后参与评论

0 条评论

热度