统计
  • 建站日期:2021-03-10
  • 文章总数:35 篇
  • 评论总数:48 条
  • 分类总数:16 个
  • 最后更新:10月30日
文章 建站技术

给网站底部底部添加蓝色波浪

小蓝
首页 建站技术 正文


给网站底部底部添加蓝色波浪
-蓝立网
-第1
张图片
在网站底部文件合适的位置添加下面的代码:

<!--底部波浪开始-->
<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>
<!--底部波浪结束-->

版权说明
文章采用: 《署名-非商业性使用-相同方式共享 4.0 国际 (CC BY-NC-SA 4.0)》许可协议授权。
版权声明:未标注转载均为本站原创,转载时请以链接形式注明文章出处。如有侵权、不妥之处,请联系站长删除。敬请谅解!

-- 展开阅读全文 --
EmlogPro文章登录与回复可见隐藏内容插件
« 上一篇
Emlog附件下载样式插件
下一篇 »

发表评论

已有 2 条评论

  1. 帅帅 Lv.1

    说道:弱弱的问下怎在 emlog的主题插件中 添加这个蓝色的大波浪,本人V:shexss   跪求.....

    1. 小蓝 V管理员

      说道:@帅帅:这个有发过教程的,在网站里找找

HI ! 请登录
注册会员,享受下载全站资源特权。
社交账号登录

热门文章

2
EmlogPro简约蓝BULE博客主题
3
4
EmlogPro简资源主题JZY
5

最新文章