子比主题-网站底部添加滚动波浪手机端PC端自适应

文章最后更新时间:2025-09-04 23:19:37

20250919161424178-20250919161424330084

 

 

代码部署

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.然后打开子比主题文件夹的页脚.php文件,把下面的代码放到<footer class = "footer">标签的前面即可。

图片[2]-子比主题-网站底部添加滚动波浪手机端PC端自适应-九二分享

本内容转载子比主题论坛作者:夏天

 
© 版权声明
THE END
喜欢就支持一下吧
点赞0
评论 抢沙发

请登录后发表评论

    暂无评论内容