网站底部蓝色波浪样式代码


网站通用底部波浪代码样式,给你的网站增添不一样的风格

bolang.gif

代码详情如下

<!--底部波浪开始-->
<div class="wiiuii_layout">
<svg class="editorial"
     xmlns="https://www.w3.org/2000/svg"
     xmlns:xlink="https://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>
<!--底部波浪结束-->
本文最后更新于2023-3-5,已超过 1 年以上没有更新,如果文章内容或图片资源失效,请留言反馈,我们会及时处理,谢谢!
CTRL+D快速收藏,欢迎常来喔

本文来自投稿,不代表本站立场,如若转载,请注明出处: http://b.xixd.cn/post-57.html
原文地址: 《网站底部蓝色波浪样式代码》 发布于2023年3月5日

温馨提示: 没找到想要的资源?资源链接失效?下载后资源打不开?点我进群帮你解决!

本文标签:

相关推荐
发表评论
您需要登录后才可以回复 【 登录 】
0 评论
还没有评论,快来抢沙发吧!