子比主题如何实现本站底部效果 (适配暗黑模式)

子比主题如何实现本站底部效果 (适配暗黑模式)

效果见本站,人狠话不多,直接上代码,在主题的 footer.php 中的 </body> 前加入以下代码,做了 PC 端和移动端判断:

另外,还需要安装 WP-PostViews 插件,引入文件 (收藏本站需要弹层),见:

文字抖动效果 (添加到自定义 CSS 中,需要压缩的自己去压缩后添加):

.my-face {
	animation: my-face 5s infinite ease-in-out;
	color: #00f1ff;
	display: inline-block;
	margin: 0 5px
}

@-webkit-keyframes my-face {
	2%,24%,80% {
		-webkit-transform: translate(0,1.5px) rotate(1.5deg);
		transform: translate(0,1.5px) rotate(1.5deg)
	}

	4%,68%,98% {
		-webkit-transform: translate(0,-1.5px) rotate(-.5deg);
		transform: translate(0,-1.5px) rotate(-.5deg)
	}

	38%,6% {
		-webkit-transform: translate(0,1.5px) rotate(-1.5deg);
		transform: translate(0,1.5px) rotate(-1.5deg)
	}

	8%,86% {
		-webkit-transform: translate(0,-1.5px) rotate(-1.5deg);
		transform: translate(0,-1.5px) rotate(-1.5deg)
	}

	10%,72% {
		-webkit-transform: translate(0,2.5px) rotate(1.5deg);
		transform: translate(0,2.5px) rotate(1.5deg)
	}

	12%,64%,78%,96% {
		-webkit-transform: translate(0,-.5px) rotate(1.5deg);
		transform: translate(0,-.5px) rotate(1.5deg)
	}

	14%,54% {
		-webkit-transform: translate(0,-1.5px) rotate(1.5deg);
		transform: translate(0,-1.5px) rotate(1.5deg)
	}

	16% {
		-webkit-transform: translate(0,-.5px) rotate(-1.5deg);
		transform: translate(0,-.5px) rotate(-1.5deg)
	}

	18%,22% {
		-webkit-transform: translate(0,.5px) rotate(-1.5deg);
		transform: translate(0,.5px) rotate(-1.5deg)
	}

	20%,36%,46% {
		-webkit-transform: translate(0,-1.5px) rotate(2.5deg);
		transform: translate(0,-1.5px) rotate(2.5deg)
	}

	26%,50% {
		-webkit-transform: translate(0,.5px) rotate(.5deg);
		transform: translate(0,.5px) rotate(.5deg)
	}

	28% {
		-webkit-transform: translate(0,.5px) rotate(1.5deg);
		transform: translate(0,.5px) rotate(1.5deg)
	}

	30%,40%,62%,76%,88% {
		-webkit-transform: translate(0,-.5px) rotate(2.5deg);
		transform: translate(0,-.5px) rotate(2.5deg)
	}

	32%,34%,66% {
		-webkit-transform: translate(0,1.5px) rotate(-.5deg);
		transform: translate(0,1.5px) rotate(-.5deg)
	}

	42% {
		-webkit-transform: translate(0,2.5px) rotate(-1.5deg);
		transform: translate(0,2.5px) rotate(-1.5deg)
	}

	44%,70% {
		-webkit-transform: translate(0,1.5px) rotate(.5deg);
		transform: translate(0,1.5px) rotate(.5deg)
	}

	48%,74%,82% {
		-webkit-transform: translate(0,-.5px) rotate(.5deg);
		transform: translate(0,-.5px) rotate(.5deg)
	}

	52%,56%,60% {
		-webkit-transform: translate(0,2.5px) rotate(2.5deg);
		transform: translate(0,2.5px) rotate(2.5deg)
	}

	58% {
		-webkit-transform: translate(0,.5px) rotate(2.5deg);
		transform: translate(0,.5px) rotate(2.5deg)
	}

	84% {
		-webkit-transform: translate(0,1.5px) rotate(2.5deg);
		transform: translate(0,1.5px) rotate(2.5deg)
	}

	90% {
		-webkit-transform: translate(0,2.5px) rotate(-.5deg);
		transform: translate(0,2.5px) rotate(-.5deg)
	}

	92% {
		-webkit-transform: translate(0,.5px) rotate(-.5deg);
		transform: translate(0,.5px) rotate(-.5deg)
	}

	94% {
		-webkit-transform: translate(0,2.5px) rotate(.5deg);
		transform: translate(0,2.5px) rotate(.5deg)
	}

	0%,100% {
		-webkit-transform: translate(0,0) rotate(0);
		transform: translate(0,0) rotate(0)
	}
}

@keyframes my-face {
	2%,24%,80% {
		-webkit-transform: translate(0,1.5px) rotate(1.5deg);
		transform: translate(0,1.5px) rotate(1.5deg)
	}

	4%,68%,98% {
		-webkit-transform: translate(0,-1.5px) rotate(-.5deg);
		transform: translate(0,-1.5px) rotate(-.5deg)
	}

	38%,6% {
		-webkit-transform: translate(0,1.5px) rotate(-1.5deg);
		transform: translate(0,1.5px) rotate(-1.5deg)
	}

	8%,86% {
		-webkit-transform: translate(0,-1.5px) rotate(-1.5deg);
		transform: translate(0,-1.5px) rotate(-1.5deg)
	}

	10%,72% {
		-webkit-transform: translate(0,2.5px) rotate(1.5deg);
		transform: translate(0,2.5px) rotate(1.5deg)
	}

	12%,64%,78%,96% {
		-webkit-transform: translate(0,-.5px) rotate(1.5deg);
		transform: translate(0,-.5px) rotate(1.5deg)
	}

	14%,54% {
		-webkit-transform: translate(0,-1.5px) rotate(1.5deg);
		transform: translate(0,-1.5px) rotate(1.5deg)
	}

	16% {
		-webkit-transform: translate(0,-.5px) rotate(-1.5deg);
		transform: translate(0,-.5px) rotate(-1.5deg)
	}

	18%,22% {
		-webkit-transform: translate(0,.5px) rotate(-1.5deg);
		transform: translate(0,.5px) rotate(-1.5deg)
	}

	20%,36%,46% {
		-webkit-transform: translate(0,-1.5px) rotate(2.5deg);
		transform: translate(0,-1.5px) rotate(2.5deg)
	}

	26%,50% {
		-webkit-transform: translate(0,.5px) rotate(.5deg);
		transform: translate(0,.5px) rotate(.5deg)
	}

	28% {
		-webkit-transform: translate(0,.5px) rotate(1.5deg);
		transform: translate(0,.5px) rotate(1.5deg)
	}

	30%,40%,62%,76%,88% {
		-webkit-transform: translate(0,-.5px) rotate(2.5deg);
		transform: translate(0,-.5px) rotate(2.5deg)
	}

	32%,34%,66% {
		-webkit-transform: translate(0,1.5px) rotate(-.5deg);
		transform: translate(0,1.5px) rotate(-.5deg)
	}

	42% {
		-webkit-transform: translate(0,2.5px) rotate(-1.5deg);
		transform: translate(0,2.5px) rotate(-1.5deg)
	}

	44%,70% {
		-webkit-transform: translate(0,1.5px) rotate(.5deg);
		transform: translate(0,1.5px) rotate(.5deg)
	}

	48%,74%,82% {
		-webkit-transform: translate(0,-.5px) rotate(.5deg);
		transform: translate(0,-.5px) rotate(.5deg)
	}

	52%,56%,60% {
		-webkit-transform: translate(0,2.5px) rotate(2.5deg);
		transform: translate(0,2.5px) rotate(2.5deg)
	}

	58% {
		-webkit-transform: translate(0,.5px) rotate(2.5deg);
		transform: translate(0,.5px) rotate(2.5deg)
	}

	84% {
		-webkit-transform: translate(0,1.5px) rotate(2.5deg);
		transform: translate(0,1.5px) rotate(2.5deg)
	}

	90% {
		-webkit-transform: translate(0,2.5px) rotate(-.5deg);
		transform: translate(0,2.5px) rotate(-.5deg)
	}

	92% {
		-webkit-transform: translate(0,.5px) rotate(-.5deg);
		transform: translate(0,.5px) rotate(-.5deg)
	}

	94% {
		-webkit-transform: translate(0,2.5px) rotate(.5deg);
		transform: translate(0,2.5px) rotate(.5deg)
	}

	0%,100% {
		-webkit-transform: translate(0,0) rotate(0);
		transform: translate(0,0) rotate(0)
	}
}

适配暗黑模式,同样将以下代码添加到自定义 CSS 中:

/*白天*/
body .zbottom {
    background:#fff;
}
body .footwavewave {
    background: url(https://zeronohacker.com/pic/底部导航尖角.png) 0 0 repeat-x;
    height: 3px;
    width: 100%;
    position: fixed;
    background-size: 10px 3px;
    z-index: 98;
    bottom: 40px;
}
/*黑夜*/
.dark-theme .zbottom {
    background:#292a2d;
}
.dark-theme .footwavewave {
    background: url(https://zeronohacker.com/pic/底部导航尖角暗.png) 0 0 repeat-x;
    height: 3px;
    width: 100%;
    position: fixed;
    background-size: 10px 3px;
    z-index: 98;
    bottom: 40px;
}

附带一个底部波浪,把以下代码放在自定义底部 HTML 中:

<!--底部波浪开始-->
<div class="wiiuii_layout">
<svg class="editorial"
     xmlns="http://www.w3.org/2000/svg"
     xmlns:xlink="http://www.w3.org/1999/xlink"
     viewBox="0 24 150 28"
     preserveAspectRatio="none">
 <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" />
  </defs>
  <g class="parallax">
   <use xlink:href="#gentle-wave" x="50" y="0" fill="#4579e2"/>
   <use xlink:href="#gentle-wave" x="50" y="3" fill="#3461c1"/>
   <use xlink:href="#gentle-wave" x="50" y="6" fill="#2d55aa"/>  
  </g>
</svg>
</div>
<style type='text/css'>
.parallax > use{animation: move-forever 12s linear infinite;}.parallax > use:nth-child(1){animation-delay: -2s;}.parallax > use:nth-child(2){animation-delay: -2s; animation-duration: 5s;}.parallax > use:nth-child(3){animation-delay: -4s; animation-duration: 3s;}@keyframes move-forever{0%{transform: translate(-90px, 0%);} 100%{transform: translate(85px, 0%);}}.wiiuii_layout{width: 100%;height: 40px;position: relative;overflow: hidden;z-index: 1;background: var(--footer-bg);}.editorial{display: block; width: 100%; height: 40px; margin: 0;}
</style>
<!--底部波浪结束-->

© 版权声明
THE END
喜欢就支持一下吧
点赞0赞赏 分享
评论 共5条

请登录后发表评论