前端 动画 HTML5 + CSS3实现卖茶女与水果男的巅峰微信聊天对决，看完后笑一整天

记得之前看过一段卖茶女与水果男的聊天视频，当时觉得真有意思，竟然还可以这样热爱自己的事业。我就想，用HTML5 + CSS3实现一下这个过程，锻炼了技术，也娱乐了开发人员，多有意思的一件事啊。

目录

1 实现思路

1.1 实现过程需要的素材：

1.2 布局过程的内容

2 聊天内容设置 

2.1 初次相遇

2.2 对方透露工作

2.3  对方再次拉扯

2.4 不想和家人说话 

2.5 表示自己有爱心 

2.6  前期铺垫要做足

2.7 隔了2个小时开始自己的目的 

2.8  开始说重点

2.9  展示茶叶是真实的

2.10  巅峰时刻

2.11  以失败告终

3 完整源代码 

1 实现思路

1.1 实现过程需要的素材：

头像图片2个表情图片2个聊天内容图片6个聊天发送失败，图标1个

1.2 布局过程的内容

布局过程需要搭建聊天窗口头部内容，包含返回键、对方昵称、三个点（设置按钮）；

窗口内部：

需要一个聊天窗口区域、左侧为对方发送内容、右侧为自己发送的内容、发送内容需要有小三角（表示谁发送的内容）、发送内容由颜色也会有所区分、如果带有表情图片需要单独样式设置、如果发送图片，需要单独样式设置；如果被对方删除，需要单独设置叹号提示；

2 聊天内容设置 

很多人可能对技术不是那么敏感，但聊天内容一定会感兴趣的，因为太有意思了，

2.1 初次相遇

初次相遇，二人寒暄，水果男表示客套，并且要给出水果：

2.2 对方透露工作

对方第一次透露工作，希望可以将水果男带入他的接下来的聊天

2.3  对方再次拉扯

对方再次透露自己的现状，希望可以拉近两双距离

2.4 不想和家人说话 

对方再次表示，不想和家人说话

2.5 表示自己有爱心 

通过表示自己去了敬老院，表示自己其实很有爱心，这么有爱心的人，会让人放松警惕

2.6  前期铺垫要做足

对方其实还是在做铺垫，为了后续的卖茶做铺垫，要小心

2.7 隔了2个小时开始自己的目的 

视频2个小时，表示自己在和爷爷聊天

2.8  开始说重点

到这里终点开始了，爷爷的茶，是重点

2.9  展示茶叶是真实的

开始展示茶叶是真实的，并且绿色，亲自制作

2.10  巅峰时刻

巅峰时刻来了，希望自己的茶叶可以卖出去

2.11  以失败告终

这种方法对普通人可行，但也总有失败的时候

3 完整源代码 

如果你喜欢这份HTML + CSS3制作的聊天内容，那么可以把源代码拷贝一下，很有意思的内容。图片素材可以私信我，也可以自己去互联网上截个图，也可以用

精彩文章