《遇见》帖子实现细节（兼谈lzwz.js用法）

马黑黑 · 发表于 2024-4-26 10:34

请马上登录，朋友们都在花潮里等着你哦：）

您需要登录才可以下载或查看，没有账号？立即注册

x

本帖最后由马黑黑于 2024-4-26 10:40 编辑

帖子链接：遇见 - 欢乐水吧 - 花潮论坛 - Powered by Discuz! (huachaowang.com)

最近老梦见故友，因此想写一个帖子，以怀念曾经的美好时光。斯人已去，独有我还在心心念念着什么。

日出东方，唯我不败。当年的豪情与稚嫩，后来未能成就任何梦想，但日出的壮丽永远铭记于心。耀眼的太阳光芒，照亮了青春的身影，照亮了年轻的心。视频一将帖子背景中的太阳烘托一番，原令其贯穿帖子左右，后面觉得太夸张，宽度改成了 60%（08行代码，代码在原帖二楼）。视频二装饰右边的树，那可能是象征天真与稚气，它的底色不够纯黑，用 screen 融合到背景后还是有一点点痕迹，可以考虑加个透明度；注意这里的 left 值和 width 值的关系，二者加起来刚好是100%（09行代码）。

俩群飞翔的鸟，阐述天高任我飞的愿景。小鸟是帖子背景图的元素，两个伪元素就地取材，将小鸟分别装入自己的背景，并做幅度很小的关键帧动画。由于色差问题，关键帧动画确实不宜大幅度运动，会露馅，左边的其实已经有轻微露馅了。

帖子右下的粒子化文本，用 canvas 画布做成，代码量较大，所以封装成独立文件，地址和引用方法具体看 23~27 行。这里讲讲文本配置：

lzwz.js 引用之后，应配置 wz 对象：

var wz = {
papa: '#mydiv', /* 指定帖子元素 id 带 # 号，class 带 . 号 */
text: 'MEET YOU', /* 待输出文本 */
left: '620px', /* 画布左边值 */
top: '550px', /* 画布顶边值 */
color: 'lightblue' /* 前景色支持 rgb 或 rgba 等表示法 */
};

其中，papa 参数必须配置；text 参数若不配置，会输出默认文本；left 和 top 若不配置，默认均为 10px；color 若不配置或空值 ''，则使用随机色。

可以通过 CSS 设置画布的宽高以外的大多数属性，比如帖子的文本输出效果是斜体的，其实这是用了 transform: skew(-15deg); 属性设置令其扭曲而已（10行代码）。lzwz.js 固定了文本尺寸，如果需要变小或变大一点，也可以通过 transform 来实现： transform: skew(-15deg) scale(0.8, 0.8); 。还有其他种种可能。不过需要注意的是，如果帖子上还有其他的画布，请通过CSS精准定位到它：lzwz.js 采用后追加方式加入画布，从层级关系上看它排在最后，假设帖子共已有了一个画布，可以这么定位它——

#mydiv > canvas:nth-of-type(2) { /* 相关代码 */ }

【其他说明】

lzwz.js 没有设置动画的开关；
粒子化文本会根据文字长短改变画布尺寸，它应该放在帖子的什么位置因此可能需要多次尝试；
待输出的文本不宜太长，lzwz.js 没有做折行处理；
粒子化文本特效仍在测试中，可靠性和稳定性可能存在未知因素。