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

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

  1. <!--底部波浪开始-->
  2. <div class="wiiuii_layout">
  3. <svg class="editorial"
  4. xmlns="http://www.w3.org/2000/svg"
  5. xmlns:xlink="http://www.w3.org/1999/xlink"
  6. viewBox="0 24 150 28"
  7. preserveAspectRatio="none">
  8. <defs>
  9. <path id="gentle-wave"
  10. d="M-160 44c30 0
  11. 58-18 88-18s
  12. 58 18 88 18
  13. 58-18 88-18
  14. 58 18 88 18
  15. v44h-352z" />
  16. </defs>
  17. <g class="parallax">
  18. <use xlink:href="#gentle-wave" x="50" y="0" fill="#4579e2"/>
  19. <use xlink:href="#gentle-wave" x="50" y="3" fill="#3461c1"/>
  20. <use xlink:href="#gentle-wave" x="50" y="6" fill="#2d55aa"/>
  21. </g>
  22. </svg>
  23. </div>
  24. <style type='text/css'>
  25. .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;}
  26. </style>
  27. <!--底部波浪结束-->

原创文章,作者:冲灵的屋,如若转载,请注明出处:http://gangzi.ueuo.com/?post=36

打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
上一篇 2023-4-4 14:17
下一篇 2023-4-4 14:21

相关推荐

发表回复

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


天下没有免费的午餐,努力创造奇迹吧少年! | 不朽千秋

Free Web Hosting