如何用原生JS编写一个长尾词弹窗提醒插件？

本文共计3465个文字，预计阅读时间需要14分钟。

1. 分析：当消息被触发的时刻，会有一个自上而下的渐入过程。在持续一段时间后，会自动消失，或者需要用户手动点击关闭按钮。在消息消失时，会有一个自下而上的渐出效果。

1.分析

当消息被触发的时候，会有一个自上而下的淡入过程。
在持续了一段时间后会自动的消失，或者是需要用户来手动的点击关闭按钮。
在消息消失的时候，会有一个自下而上的淡出过程。
消息是可以叠加弹出的，最新的消息会排在消息列表的最后面。
当前面的消息消失后，后面的消息会有一个向上滑动效果。
然后消息本身是有三部分组成

消息图标，用来区分不同类型的消息。
消息文本。
关闭按钮，并不是所有消息都需要关闭按钮。

2. 实现样式

那么，不管我们是用原生js还是vue，首先呢，我们都需要把这个消息的基本样式给写出来，然后再通过js来控制消息的弹出和关闭。
所以，我们先来写html和css。