为自己的添加 motto 漂浮效果

我老早注册博客园账号的时候就发现，它为我们提供了很高的自主权，不过那时候代码写得蹩脚，也就一直没写博客。

现在情况不一样了，我想把经验性的东西更好地纳入自己的知识体系，所以就想通过写博客来不断完善自己，所以从今以后我也要在博客园混啦，各位道友一定要不吝赐教！

那我入驻博客园了，JS 权限肯定不能浪费，下面是我写的一段代码，不到 100 行，放在“页脚 HTML”里就能直接使用！

 1 <style>
 2     body {
 3         overflow-x: hidden;
 4     }
 5     .life-motto {
 6         position: absolute;
 7         z-index: 100;
 8         white-space: nowrap;
 9         animation: bubble ease-out 1s forwards;
10     }
11     @keyframes bubble {
12         0% {
13             transform: translateY(0);
14             opacity: 1;
15         }
16         100% {
17             transform: translateY(-30px);
18             opacity: 0;
19         }
20     }
21 </style>
22 <script>
23     class MyMotto {
24         constructor(data) {
25             this.data = data;
26             this.initPool();
27         }
28         initPool() {
29             const mottoPool = document.createElement("div");
30             mottoPool.className = "motto-pool";
31             this.mottoPool = mottoPool;
32         }
33         addMotto(x, y) {
34             const data = this.data;
35             const cur = data.shift();
36             const { text, color } = cur;
37             const motto = document.createElement("span");
38             motto.className = "life-motto";
39             motto.innerText = text;
40             motto.style.cssText = `
41                 left: ${x}px;
42                 top: ${y}px;
43                 color: ${color};
44             `;
45             this.mottoPool.appendChild(motto);
46             data.push(cur);
47         }
48         mount(el) {
49             let timer = null;
50             el.addEventListener("click", ({ pageX, pageY }) => {
51                 this.addMotto(pageX + 10, pageY - 20);
52                 if (timer) {
53                     clearTimeout(timer);
54                 }
55                 timer = setTimeout(() => {
56                     this.mottoPool.innerText = "";
57                 }, 1000);
58             });
59 
60             el.appendChild(this.mottoPool);
61         }
62     }
63 
64     new MyMotto([
65         { text: "热爱生活，热爱自然", color: "#c12e34" },
66         { text: "不要在心情不好的时候做决定", color: "#e6b600" },
67         { text: "向钱看，向厚看", color: "#0098d9" },
68         { text: "天冷要加衣", color: "#1b821d" },
69         { text: "要养成良好的编码风格", color: "#005eaa" },
70         { text: "多活动，多跑步", color: "#339ca8" },
71         { text: "多欣赏身边的美好", color: "#cda819" },
72         { text: "今日事，今日毕", color: "#32a487" },
73     ]).mount(document.body);
74 </script>