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

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


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

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

这次又找了个动态波浪的代码(从晨岩同志处抄的ヽ(✿゚▽゚)ノ),放到网站底部,算是对页面的一个美化改进。

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

截了个 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 日更新:删除动态波浪效果,将这块地方放上友情链接,以后本站也就有首页友链了。

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

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

涂鸦清单-个人记录

7 评论

  1. 二次元

留下评论

您的电子邮箱地址不会被公开。 必填项已用*标注

Document