给网站页面做了下美化调整，在网站底部增加了蓝色动态波浪效果（附代码）

趁着年轻，请多折腾自己一点，不然到老了都没有回忆可言

---

最近折腾网站的兴趣很浓厚呀，总琢磨着把网站页面再改改，字体、间距什么的都调整一下。

上次加上了访问数据统计，使用效果还不错，网站底部直接能看到每天的访问人数和访问量（想做同款的可以参考这篇文章：怎么给网站底部添加访问统计）。

这次又找了个动态波浪的代码，放到网站底部，算是对页面的一个美化改进。

看着波浪一起一伏，心情也平静了很多，这小玩意儿貌似还有放松减压的效果。

截了个 gif 图，可以看下效果。

附上抄来的代码

<!--FOOTER_CODE_START-->
<!--底部波浪开始-->
<div class="wiiuii_layout">
<svg class="editorial"
     xmlns="http://www.w3.org/2000/svg"
     xmlns:xlink="http://www.w3.org/1999/xlink"
     viewBox="0 24 150 28"
     preserveAspectRatio="none">
 <defs>
 <path id="gentle-wave"
 d="M-160 44c30 0 
    58-18 88-18s
    58 18 88 18 
    58-18 88-18 
    58 18 88 18
    v44h-352z" />
  </defs>
  <g class="parallax">
   <use xlink:href="#gentle-wave" x="50" y="0" fill="#4579e2"/>
   <use xlink:href="#gentle-wave" x="50" y="3" fill="#3461c1"/>
   <use xlink:href="#gentle-wave" x="50" y="6" fill="#2d55aa"/>  
  </g>
</svg>
</div>
<style type='text/css'>
.parallax > use{animation: move-forever 12s linear infinite;}.parallax > use:nth-child(1){animation-delay: -2s;}.parallax > use:nth-child(2){animation-delay: -2s; animation-duration: 5s;}.parallax > use:nth-child(3){animation-delay: -4s; animation-duration: 3s;}@keyframes move-forever{0%{transform: translate(-90px, 0%);} 100%{transform: translate(85px, 0%);}}.wiiuii_layout{width: 100%;height: 40px;position: relative;overflow: hidden;z-index: 1;background: var(--footer-bg);}.editorial{display: block; width: 100%; height: 40px; margin: 0;}
</style>
<!--底部波浪结束-->

2022 年 8 月 2 日更新：
删除动态波浪效果，将这块地方放上友情链接，以后本站也就有首页友链了。

---

愿你一如所愿，万事圆满。

欢迎添加书签收藏本站，关注我的后续文章。

涂鸦清单-个人记录