我老早注册博客园账号的时候就发现，它为我们提供了很高的自主权，不过那时候代码写得蹩脚，也就一直没写博客。
成都创新互联-专业网站定制、快速模板网站建设、高性价比枣强网站开发、企业建站全套包干低至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>
