为自己的添加 motto 漂浮效果

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

成都创新互联-专业网站定制、快速模板网站建设、高性价比枣强网站开发、企业建站全套包干低至880元,成熟完善的模板库,直接使用。一站式枣强网站制作公司更省心,省钱,快速模板网站建设找我们，业务覆盖枣强地区。费用合理售后完善，10多年实体公司更值得信赖。

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

那我入驻博客园了，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>

当前文章：为自己的添加 motto 漂浮效果
文章起源：http://cdxtjz.cn/article/dsopois.html