扒来的一个底部滚动波浪,手机端PC端自适应。截图可能看不出效果
![图片[1]-子比底部添加滚动波浪-宇凌云界](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>
免费资源不提供免费搭建技术支持
该样式块来自Giraffe子主题
温馨提示:
本文最后更新于
2025-06-15 20:39:17
© 版权声明
THE END
暂无评论内容