子比底部添加滚动波浪

子比底部添加滚动波浪-YULLL博客网
子比底部添加滚动波浪
此内容为免费阅读,请登录后查看
大米0
免费阅读

扒来的一个底部滚动波浪,手机端PC端自适应。截图可能看不出效果

图片[1]-子比底部添加滚动波浪-YULLL博客网

代码部署

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>
© 版权声明
THE END
喜欢就支持一下吧
点赞6 分享
评论 抢沙发

请登录后发表评论

    暂无评论内容