扒来的一个底部滚动波浪,手机端PC端自适应。截图可能看不出效果
![图片[1]-子比底部添加滚动波浪-YULLL博客网](https://www.yulll.com/wp-content/uploads/2025/05/IMG_9426-1024x837.jpeg)
代码部署
1.把下面代码放到主题设置里的自定义CSS代码里。
/*网站底部波浪*/.waves { position: relative; width: 100%; height: 15vh; margin-bottom: -7px; min-height: 50px; max-height: 80px;}.parallax>use { animation: move-forever 25s cubic-bezier(.55, .5, .45, .5)infinite;}.parallax>use:nth-child(1) { animation-delay: -2s; animation-duration: 7s;}.parallax>use:nth-child(2) { animation-delay: -3s; animation-duration: 10s;}.parallax>use:nth-child(3) { animation-delay: -4s; animation-duration: 13s;}.parallax>use:nth-child(4) { animation-delay: -5s; animation-duration: 20s;}@keyframes move-forever { 0% { transform: translate3d(-90px, 0, 0); } 100% { transform: translate3d(85px, 0, 0); }}@media (max-width:768px) { .waves { height: 40px; min-height: 40px; } .waves-inner { padding-top: 50px; } .mg-b { margin-bottom: 0; } .home_row { padding: 0px !important; }}.apply_link { float: right;}/*网站<a href="https://xtwo.cn/tag/%e5%ba%95%e9%83%a8%e6%b3%a2%e6%b5%aa" title="查看底部波浪的所有文章" target="_blank" class="lutag ">底部波浪</a>*/
2.然后打开子比主题文件夹的footer.php
文件,把下面的代码放到<footer class="footer">
标签的前面即可。
<svg <strong>class</strong>="waves" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 24 150 28" preserveAspectRatio="none" shape-rendering="auto"style="bottom: 4px;"> <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"></path> </defs> <g <strong>class</strong>="parallax"> <use xlink:href="#gentle-wave" x="48" y="0" fill="var(--float-btn-bg)"></use> <use xlink:href="#gentle-wave" x="48" y="3" fill="var(--main-shadow)"></use> <use xlink:href="#gentle-wave" x="48" y="5" fill="var(--main-border-color)"></use> <use xlink:href="#gentle-wave" x="48" y="7" fill="var(--main-bg-color)"></use> </g></svg>
© 版权声明
本站[宇凌博客网]收集的资源仅供内部学习研究软件设计思想和原理使用,学习研究后请自觉删除,请勿传播,因未及时删除所造成的任何后果责任自负。
如果用于其他用途,请购买正版支持作者,谢谢!若您认为「www.yulll.com」发布的内容若侵犯到您的权益,请联系站长邮箱:yullld@163.com 进行删除处理。
本站资源大多存储在云盘,如发现链接失效,请联系我们,我们会第一时间更新。THE END
暂无评论内容