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

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

效果如下:

图片[1]-子比主题如何实现本站底部效果 (适配暗黑模式)-零度非安全
白天模式
图片[2]-子比主题如何实现本站底部效果 (适配暗黑模式)-零度非安全
暗黑模式

在主题的 footer.php 中的 </body> 前加入以下代码,做了 PC 端和移动端判断:

<?php if(!wp_is_mobile()){ ?>
<style>
.footgundong{margin-left:20px;overflow:overlay;display:inline-flex;text-align:right;}.item-foot{color:var(--minor);height:45px;line-height:45px;transition:color .35s;white-space:nowrap;}.swal-footer{text-align:center;}.swal-button{font-size:20px;}.count>svg,.count>text{display:none;}
</style>
<div class="footwaveline">
    <i style="background-image: url(https://zeronohacker.com/pic/底部导航.png);display: inline-block;width: 210px;height: 120px;position: fixed;bottom: 0;z-index: 110;background-size: 100%;"></i>
    <div class="footwavewave"></div>
    <div id="shi" style="position: fixed;bottom: 0;margin-left: 200px;z-index: 99;">
       <h4 class="my-face" style="font-size:14px;margin:0 5px 2px 5px;color:#797979;margin-bottom: 10px;">『零度非安全』欢迎您!😊</h4>
    </div>
    <div class="zbottom" style="width: 100%;height: 40px;position: fixed;bottom: 0;z-index: 97;box-shadow: 0 -2px 10px rgb(0 0 0 / 10%);">
        <nav class="joe_header__below-logon" style="float: right;margin-right: 50px;">
            <style>@media (max-width:1200px){#shi{display:none;}}.pl,.fx{display:none;}.dz{display:none !important;}</style>
            <div id="bulletin" class="footgundong">
                <ul>
                    <?php wp_reset_query();query_posts( array ( 'orderby' => 'rand', 'showposts' => 5, 'ignore_sticky_posts' => 10 ) ); while ( have_posts() ) : the_post();?>
                    <li>
                        <a class="item-foot" href="<?php the_permalink(); ?>" rel="bookmark" data-toggle="tooltip" target="_blank" title="细看 <?php the_title(); ?>">
                        <?php echo '<svg class="icon" aria-hidden="true"><use xlink:href="#icontuijian"></use></svg><span style="color:#797979;"> 随机推荐: 《';the_title();echo '》';if(function_exists('the_views')) {print '( ';the_views();print ' | </a>';}comments_popup_link('快抢沙发','1 条评论','% 条评论'); ?> )
                    </li>
                    <?php endwhile; ?>
                </ul>
            </div>
            <span style="margin-left:20px;line-height: 45px;">
                <a id="dorzs">
                    <svg class="icon" aria-hidden="true"><use xlink:href="#icona-aixinxihuan"></use></svg><span style="color:#797979;"> 感谢捐赠</span>
                </a>
            </span>
            <span style="margin-left:20px;line-height: 45px;">
                <a href="javascript:void(0);" id="shoucang">
                    <svg class="icon" aria-hidden="true"><use xlink:href="#iconshoucangshipin"></use></svg><span style="color:#797979;"> 收藏本站</span>
                </a>
            </span>
            <span style="margin-left:20px;line-height: 45px;">
                <svg class="icon" aria-hidden="true"><use xlink:href="#iconicon-test1"></use></svg>
                <a id="fps"></a>
            </span>
            <a style="margin-left:20px;line-height: 45px;" href="javascript:(scrollTo());" id="percentage">
                <svg class="icon" aria-hidden="true"><use xlink:href="#icona-feijihangban"></use></svg><span style="color:#797979;"> 0%</span>
            </a>
        </nav>
    </div>
</div>
<script src="https://res.zeronohacker.com/footer/sweetalert.min.js"></script>
<script>
var showFPS = (function(){ 
    var requestAnimationFrame =  
        window.requestAnimationFrame || 
        window.webkitRequestAnimationFrame || 
        window.mozRequestAnimationFrame ||
        window.oRequestAnimationFrame ||
        window.msRequestAnimationFrame || 
        function(callback) { 
            window.setTimeout(callback, 1000/60); 
        }; 
    var e,pe,pid,fps,last,offset,step,appendFps; 
 
    fps = 0; 
    last = Date.now(); 
    step = function(){ 
        offset = Date.now() - last; 
        fps += 1; 
        if( offset >= 1000 ){ 
        last += offset; 
        appendFps(fps); 
        fps = 0; 
        } 
        requestAnimationFrame( step ); 
    }; 
    appendFps = function(fps){ 
        $('#fps').html(fps+' FPS');
    };
    step();
})();
// 文字滚动
(function($) {
	$.fn.extend({
	Scroll: function(opt, callback) {
	if (!opt) var opt = {};
		var _this = this.eq(0).find("ul:first");
		var lineH = _this.find("li:first").height(),
		line = opt.line ? parseInt(opt.line, 10) : parseInt(this.height() / lineH, 10),
		speed = opt.speed ? parseInt(opt.speed, 10) : 5000, //卷动速度,数值越大,速度越慢(毫秒)
                timer = opt.timer ? parseInt(opt.timer, 10) : 7000; //滚动的时间间隔(毫秒)
		if (line == 0) line = 1;
		var upHeight = 0 - line * lineH;
		scrollUp = function() {
			_this.animate({
				marginTop: upHeight
			}, speed, function() {
				for (i = 1; i <= line; i++) {
					_this.find("li:first").appendTo(_this);
					}
					_this.css({
					marginTop: 0
					});
				});
			}
			_this.hover(function() {
				clearInterval(timerID);
			}, function() {
				timerID = setInterval("scrollUp()", timer);
			}).mouseout();
		}
	})
})(jQuery);
$(document).ready(function() {
	$("#bulletin").Scroll({
		line: 1,
		speed: 1000,
		timer: 4000
	}); //修改此数字调整滚动时间
});
window.onscroll = function() {
    let scrollNow = window.pageYOffset;
    let pageClientHeight = document.documentElement.clientHeight;
    let scrollHeight = Math.max(document.body.scrollHeight, document.documentElement.scrollHeight, document.body.offsetHeight, document.documentElement.offsetHeight, document.body.clientHeight, document.documentElement.clientHeight) - pageClientHeight;
    let fullWindowHeightInPercentage = Math.round((scrollNow / scrollHeight) * 100);
    let percentage = document.getElementById('percentage');
    percentage.innerHTML = '<svg class="icon" aria-hidden="true"><use xlink:href="#icona-feijihangban"></use></svg> <span style="color:#797979;">' + fullWindowHeightInPercentage + '%</span>';
    if (fullWindowHeightInPercentage == 0) percentage.innerHTML = '<svg class="icon" aria-hidden="true"><use xlink:href="#icona-mountainsshandingshanmai"></use></svg><span style="color:#797979;"> 到顶啦</span>';
    if (fullWindowHeightInPercentage == 100) percentage.innerHTML = '<svg class="icon" aria-hidden="true"><use xlink:href="#icondiqiu"></use></svg> <span style="color:#797979;">到底啦</span>';
    }
    var btn = document.getElementById("shoucang");
    btn.onclick = function() {new Vue({
        data:function(){
            this.$notify({
                title:"⭐ 欢迎收藏本站",
                message:"使用 Ctrl+D 即可添加收藏",
                position: 'top-right',
                offset: 50,
                showClose: false,
                type:""
            });
            return{visible:false}
        }
    })};
</script>
<script>
    $(document).on("click","#dorzs",function(){swal({title:"赠人玫瑰,手有余香!",text:"感谢老铁的支持!!",icon:"https://res.zeronohacker.com/2022/04/202204040517121bb87d41d15f272.png",buttons:{weixin:{text:"微信",value:"weixin",},zfb:{text:"支付宝",value:"zfb",},dsmd:{text:"打赏名单",value:"dsmd",},},}).then(function(value){if(value=="weixin"){swal({title:"感谢打赏!",text:"感谢您的微信打赏,我会努力做得更好!",button:false,icon:"https://zeronohacker.com/pic/wxpay.png"});}else if(value=="zfb"){swal({title:"感谢打赏!",text:"感谢您的支付宝打赏,我会努力做得更好!",button:false,icon:"https://zeronohacker.com/pic/alipay.png"});}else if(value=="dsmd"){swal({title:"打赏名单",text:"【打赏名单未开放】",icon:"https://res.zeronohacker.com/2022/04/202204040517121bb87d41d15f272.png",button:false,});}});});
</script>
<?php } ?>

引入阿里图标库 (防字体库滥用不显示,自己根据自己口味添加喜欢的):

<script src="//at.alicdn.com/t/font_xxxxxx.js"></script>

另外,还需要安装 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赞赏 分享
评论 共7条

请登录后发表评论