为自己的博客添加一点效果

博客园为我们提供了主题，还可以申请 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>
posted @ 2022-10-21 06:41  万物有序  阅读(69)  评论(0)    收藏  举报