为自己的博客添加一点效果
博客园为我们提供了主题，还可以申请 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>
