背景

愿景

效果

页面加载

选择背景音乐

选择信封和信纸

写下你想说的话

二维码页面

预览效果

技术难点

信封打开动画

背景音乐和图标行为一致性

结语

背景

2.14就是情人节了，不知道各位读（直）者（男）想到了什么样的礼物，或者是还没有女盆友。。

想来和女盆友在一起已经五年多了，想当年没少给她写情书。尽管后来这一个习惯断了，但是情书这种形式还是很有意义。现在作为一名理工男，想用技术来实现一个电子情书。我给这个项目起了一个挺浪漫的名字：一纸情书。实际上这个项目是去年疫情期间，我和女盆友异地，我花了一天时间做出来送给她的，她还挺喜欢的。

一纸情书链接：https://railwayhs.cn/loveletter

愿景

我希望的效果是用H5的动画形式来表现情书信封的打开和弹出，另外需要自动播放背景音乐。分享的形式我是用二维码表现，情书内容也都放进了链接参数，做了编码。

如果有必要的话，后期会开源出来。欢迎沟通技术细节~

效果

页面加载

页面加载是用来缓存图片资源的，这颗心是会跳动的~，这样对象不会觉得等太久太无聊，嘿嘿

选择背景音乐

背景音乐有三首可选，都是我的偶像力宏的情歌，选中后点击下一步。

选择信封和信纸

这里我做了三种信纸和两种信封，样式少了点，但是做起来确实有点费时。选好后点击下一步，也可点击上一步重选背景音乐。

写下你想说的话

有三部分需要填写，当然少填也并不会报错。这里对字数做了限制，因为这里的文字会作为url的参数，生成二维码，如果子数太多，二维码会非常复制，不容易识别。写好后点击生成链接。

二维码页面

可以长按二维码保存，然后发给心仪的另一半~同时，你也可以预览情书的效果~

预览效果

技术难点

信封打开动画

整个H5的动画都是用css来实现的，js仅仅控制添加和移除class的时间点。

首先需要将信封拆分为3部分：信封底、信封顶和信封头，三者的z-index不同，依次增大。三部分需要基于同一个父容器，由父容器进行平移，翻开的动画是信封头的一个3d翻转动画，通过rotate3d属性来实现。

这里有两个注意点，就是信封打开后，信封头的z-index需要比信封中的信纸小。否则信纸滑出时信封头会盖住信纸。

第二点是父容器移动过程中信纸需要缩小体积，然后当信封到达页面底部时，信纸体积恢复。信封头打开后，信纸滑出。

需要注意不同动画的执行开始时间，这样才能保证动画流畅。

背景音乐和图标行为一致性

背景音乐是用uniapp的audiocontext对象实现，其play和stop属性可以控制背景音乐的播放和暂停。

而图标的转动动画，默认就是animation的无限执行，在点击暂停后，添加style animation-play-state: paused;可以暂停动画，移除后动画可以继续进行。具体细节参考https://blog.csdn.net/lyandgh/article/details/104080827。

结语

如果大家想看源码，请在评论区里留言~

最后祝福大家情人节能用创意打动自己的心上人，过一个难忘的情人节！有情人终成眷属~

万语千言，不敌一纸情书相关推荐

牛客小白月赛21 I I love you(dp的优化)
题目链接题目描述此时相望不相闻,愿逐月华流照君. 一纸情书,到底蕴含了多少倍的爱情呢? I love you, not only for what you are, but for what I ...
基于C#+MySQL的“零售店”商品销售与管理系统
全套资源下载地址:https://download.csdn.net/download/sheziqiong/86795148 全套资源下载地址:https://download.csdn.net/d ...
Iloveyou---DP
[https://ac.nowcoder.com/acm/contest/3947/I] 链接:https://ac.nowcoder.com/acm/contest/3947/I 来源:牛客网题目 ...
论坛首字命题绝句打油
2009-07-20/Lexlin 整理一下发现,不知不觉瞎诌了这么多...呵呵首字命题绝句一二三四一亩山前地,二人勤操持. 三分挥汗雨,四季庄稼济. 日久人心日落西山下,久不见新月. 人自忐 ...
一生等待，不如半世相拥
了了几年不再念想爱情,旁人一纸情书,戳中软肋,也会为暗自追逐久久的憧憬两行泪垂.只是为何,我这样坚持的等待,依然不见你在我眼帘.你其实不知,漫长的等待会沦陷一人原本纯粹的灵魂.毕竟你可能在未知的角落与 ...
七夕用腾讯最热门五大编程语言写三行情书
前两天收到了程序员女友发来的一段话: 那些周而复始的日子, 现在想来最是热泪盈眶, 只因有你陪伴. 作为一个没怎么收到过情书的男孩纸深深被感动到了,就问她是写给我的么? 她说不是,是公司搞了个三行代码 ...
《一封神气的情书》李敖
<一封神气的情书>李敖亲爱的××: 你先不要神气! 你收到这封信,小心眼里一定想:"从十六岁以来,平均每个礼拜都要接到一封信,陆军海军空军联勤,教员学生科长和隔壁的小太保各色 ...
java设计随机遇敌概率_Java随机产生中文昵称
iterator = set.iterator(); while (iterator.hasNext()) { System.err.print(iterator.next() + "\n& ...
Python表白妙招，把情书写进她的照片里
前言我的好兄弟们,2022年可算是过去了,这不马上要过年了吗就是说,各位兄弟有对象了吗,没有的回家还要面对亲戚的各种提问退一步来说,有心仪的人吗,如果有的话,就来看看这篇程序员的表白小妙招吧 ...
洛谷 P2191 小Z的情书
题目背景众所周知,小Z是高富帅的典范和代表,所以他很很多很多的妹纸.小Z要写情书给他的妹纸了,作为一个谨慎的人,他当然不会直白的写在纸上(否则被那群损友发现岂不糟了?). 题目描述虽然小Z谨小慎微 ...

万语千言，不敌一纸情书

背景

愿景

效果

页面加载

选择背景音乐

选择信封和信纸

写下你想说的话

二维码页面

预览效果

技术难点

信封打开动画

背景音乐和图标行为一致性

结语

万语千言，不敌一纸情书相关推荐

最新文章

热门文章