#热门
如何在我们的网站底部添加蓝色动态波浪代码 -静鱼客栈分享

2022-09-13 0 22
请勿商业运营,违法使用和传播!资源仅供研究学习使用!解压密码为:www.52jyu.cn

 

如何在我们的网站底部添加蓝色动态波浪代码 -静鱼客栈分享

如图,我们可以将以下代码直接添加到主题目录footer.php文件最底部即可实现波浪效果 (动态效果)

<!--底部波浪开始-->
<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" rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  x="50" y="0" fill="#4579e2"/>
   <use xlink:href="#gentle-wave" rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  x="50" y="3" fill="#3461c1"/>
   <use xlink:href="#gentle-wave" rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  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>
<!--底部波浪结束www.52jyu.cn-->

 

收藏 (0) 打赏

感谢您的支持,我会继续努力的!

打开微信/支付宝/QQ扫一扫,即可进行扫码打赏哦,分享从这里开始,精彩与您同在
点赞 (0)

1. 本站所有资源来源于用户上传和网络,因此不包含技术服务请大家谅解!如有侵权请邮件联系客服!305582964@qq.com
2. 本站不保证所提供下载的资源的准确性、安全性和完整性,资源仅供下载学习之用!如有链接无法下载、失效或广告,请联系客服处理,有奖励!
3. 您必须在下载后的24个小时之内,从您的电脑中彻底删除上述内容资源!如用于商业或者非法用途,与本站无关,一切后果请用户自负!
4. 如果您也有好的资源或教程,您可以投稿发布,成功分享后有U点奖励和额外收入!

静鱼客栈 其他教程 如何在我们的网站底部添加蓝色动态波浪代码 -静鱼客栈分享 https://www.52jyu.cn/18780.html

静鱼客栈的帅逼站长~

常见问题
  • 本站所有资源版权均属于原作者所有,这里所提供资源均只能用于参考学习用,请勿直接商用。若由于商用引起版权纠纷,一切责任均由使用者承担。更多说明请参考 VIP贵宾介绍。
查看详情
  • 最常见的情况是下载不完整: 可对比下载完压缩包的与网盘上的容量,若小于网盘提示的容量则是这个原因。这是浏览器没有下载完整造成的,可以重新进行下载即可~
查看详情

相关文章

猜你喜欢
发表评论
暂无评论
官方客服团队

为您解决烦忧 - 24小时在线 专业服务