这个是在论坛看到的,确实很不错,跟我以前的白色页脚差不多,这个是拿的白色滚动的样式来用的子比默认的底部,相当于给子比默认的页脚加了一个白色波浪,这个想法也确实不错,喜欢自行下载,如果喜欢本站的页脚,可以找我以前的文章去部署,本篇的页脚适配了PC和手机端,喜欢的自己部署一下
第一部分
将下面的代码放到/wp-content/themes/zibll/footer.php文件里面的<footer class="footer">
的标签前面即可
<svg class="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 class="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><svg class="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 class="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><svg class="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 class="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>
第二部分
将下面的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;}/*网站底部波浪*/ .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; }/*网站底部波浪*/ .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; }
© 版权声明
THE END
暂无评论内容