
剑去主题
100元出售本站一模一样的模板,限时促销!
代码部署
代码一共两个部分,一个是svg的动态,一个是实现svg的CSS代码,话不多说直接跟着我的教程来就没有问题
将下面的代码放到/wp-content/themes/zibll/footer.php
文件里面的<footer class="footer">
的标签前面即可,如果不会的话直接看下图即可!
![图片[1]-子比主题 – 底部添加波浪滚动-剑去主题](https://www.swordgo.cn/wp-content/uploads/2025/02/13a3009ba520250219204835.jpg)
将下面的css代码放到:子比主题–>>自定义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;
}
😉 阿里云产品年付99元续费99元热卖,戳我领取!
THE END
- 最新
- 最热
只看作者