文青用的好看底部导航[主题美化笔记]

015325

使用教程

在functions.php加上下面这段代码

图片请自行寻找并添加图片到(//弹窗提醒)处

在footer.php文件中的/footer下面加上以下这段代码，自行修改

进入后台 Zibll主题设置>自定义代码 页面，在 自定义头部HTML代码 加入下方代码

<!-- 引入VUE -->
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.min.js"></script>
<!-- 引入样式 -->
<script src="https://cdn.jsdelivr.net/npm/[email protected]/lib/index.js"></script>
<!-- 引入组件库 -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/packages/theme-chalk/lib/index.css">
<!--阿里巴巴图标库-->
<script src="//at.alicdn.com/t/font_2232826_a0tvv0wxh9n.js"></script>

下面是夕阳的另一种阿里巴巴图标库，也可做备用选择

<!--阿里图标库--> 
<script src="https://at.alicdn.com/t/font_2827587_k24if0ucns.js"></script>
<link rel="stylesheet" type="text/css" href="https://at.alicdn.com/t/font_2827587_k24if0ucns.css">
<style type="text/css">.icon {width: 1em; height: 1em;vertical-align: -0.15em;fill: currentColor;overflow: hidden;}</style>

 

CSS代码:

这段css其实是文字的抖动跟适应手机屏幕隐藏底部导航栏(可用可不用，不过这段建议保留)

/* 底部导航 start */
.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)
    }
}
/* end */
@media (max-width: 800px){.footwaveline{display: none;}}
#footgundong{margin-left:20px;overflow: overlay;display: inline-flex;text-align: right;}
.item-foot{color: var(--minor);height: 45px;line-height: 45px;transition: color 0.35s;white-space: nowrap;}
.swal-footer{text-align:center;}
.swal-button {font-size: 20px;}
.count>svg,.count>text{display:none;}
.wz-span {
    border: 1px solid #bbbbbb;
    height: auto;
    color: #bbbbbb;
    font-size: 10px;
    border-radius: 2px;
    padding: 0 2px;
}
/*底部导航*/

 

JS代码

这段js代码是用来触发滚动条显示百分比的，进入后台 Zibll主题设置>自定义代码 页面，在 自定义javascript代码 加入下方代码

//底部导航 滚动进度条百分比
$(function(){var $this=$("#footgundong");var scrollTimer;$this.hover(function(){clearInterval(scrollTimer)},function(){scrollTimer=setInterval(function(){scrollNews($this)},4000)}).trigger("mouseleave");function scrollNews(obj){var $self=obj.find("ul");var lineHeight=$self.find("li:first").height();$self.animate({"marginTop":-lineHeight+"px"},500,function(){$self.css({marginTop:0}).find("li:first").appendTo($self)})}})
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="#icondingwei"></use></svg> ' + fullWindowHeightInPercentage + '%';
  if (fullWindowHeightInPercentage == 0) percentage.innerHTML = '<svg class="icon" aria-hidden="true"><use xlink:href="#icondingwei"></use></svg> 到顶啦';
  if (fullWindowHeightInPercentage == 100) percentage.innerHTML = '<svg class="icon" aria-hidden="true"><use xlink:href="#icondingwei"></use></svg> 到底啦';
}
let t1 = 0;
let t2 = 0;
let scrollTop = 0;
let timer = null;
document.onscroll = function() {
  clearTimeout(timer);
  timer = setTimeout(isScrollEnd, 500);
  t1 = document.documentElement.scrollTop || document.body.scrollTop;
};
function isScrollEnd() {
  t2 = document.documentElement.scrollTop || document.body.scrollTop;
  let percentage = document.getElementById('percentage');
  if(t2 == t1){
    if(t2==document.body.scrollTop){}else{
      percentage.innerHTML = '<svg class="icon" aria-hidden="true"><use xlink:href="#iconA"></use></svg> 回到顶部';
    }
  }
};
function addshoucang() {
    new Vue({
            data:function(){
                this.$notify({
                    title:"<img draggable="false" role="img" class="emoji" alt="⭐" src="https://s.w.org/images/core/emoji/14.0.0/svg/2b50.svg"> 欢迎收藏本站",
                    message:"ㅤ  使用Ctrl+D即可添加收藏",
                    position: 'bottom-right',
                    offset: 50,
                    showClose: false,
                    type:""
                });
                return{visible:false}
            }
        })
};

结语

古早明信片齿牙状效果完成，如果有问题可在下方评论区留言。

温馨提示：本文最新于2023-11-13 23:46:54进行了更新，某些文章内容具有时效性，若失效或有错误，请在下方留言。
文青用的好看底部导航[主题美化笔记]-楊仙森万事坞
文青用的好看底部导航[主题美化笔记]
此内容为免费资源，请登录后查看
仙令0
所有文件均测试通过安全认证机构，请放心食用。
下载说明：本站所有资源均来源于网络和网友推荐收集整理而来，不提供任何存储介质，仅供学习和研究使用，请在下载后24小时内删除。
免费资源
© 版权声明
掌柜声明
本站网络名称： 楊仙森万事坞
本站永久网址： https://leohi.top
网站权益说明： 文章部分源于网络，仅供大家学习与参考，并无商业用途，如有侵权，可联系本站管理员予以处理。
① 本站一切资源不代表本站立场，并不代表本坞赞同其观点和对其真实性负责。
② 本站一律禁止以任何方式发布或转载任何违法的相关信息，访客若发现请通知坞长。
③ 本站资源来源于网络，如发现失效，可留言告知并第一时间更新。
THE END
教程
点赞25投币 分享
楊仙森的头像-楊仙森万事坞扫地神僧
星火直播/星火电视海外版 1.0.40.2 (电视直播) 官方版-楊仙森万事坞
星火直播/星火电视海外版 1.0.40.2 (电视直播) 官方版
星火直播/星火电视海外版 1.0.40.2 (电视直播) 官方版
2年前 3027
WP主题美化教程集锦[笔记]-楊仙森万事坞
WP主题美化教程集锦[笔记]
WP主题美化教程集锦[笔记]
3年前 1588
[Android]没认证的电视&盒子照样看奈飞的剧 – Netflix – Kodi Edition[安卓TV端]-楊仙森万事坞
[Android]没认证的电视&盒子照样看奈飞的剧 – Netflix – Kodi Edition[安卓TV端]
[Android]没认证的电视&盒子照样看奈飞的剧 – Netflix &#...
2年前 854
2022美国爆笑动画《小黄人大眼萌2：神偷奶爸前传 》4K/1080P中英双字-楊仙森万事坞
2022美国爆笑动画《小黄人大眼萌2：神偷奶爸前传 》4K/1080P中英双字
2022美国爆笑动画《小黄人大眼萌2：神偷奶爸前传 》4K/1080P中英双字
3年前 802
野火直播TV 5.2.5 (电视直播) 去广告版-楊仙森万事坞
野火直播TV 5.2.5 (电视直播) 去广告版
野火直播TV 5.2.5 (电视直播) 去广告版
2年前 744
2021喜剧动作《警醒》HD1080P[中英双字]-楊仙森万事坞
2021喜剧动作《警醒》HD1080P[中英双字]
2021喜剧动作《警醒》HD1080P[中英双字]
4年前 682
相关推荐
评论 抢沙发

请登录后发表评论

    暂无评论内容

开启精彩搜索
用户封面
楊仙森的头像-楊仙森万事坞扫地神僧
zibll添加一个灵动岛样式美化代码
体验macOS网页版源码Webintosh
谷歌Chrome浏览器 v132.0.6834.84 绿色增强版 Google Chrome
子比美化专区-独立下载页美化样式增强版
子比美化专区 – 免费/付费资源背景底色修改
子比美化专区-评论区无评论图片B站样式
       
新网站
热爱可抵漫长岁月！
星火直播/星火电视海外版 1.0.40.2 (电视直播) 官方版-楊仙森万事坞

星火直播/星火电视海外版 1.0.40.2 (电视直播) 官方版

2年前
3027
WP主题美化教程集锦-楊仙森万事坞

WP主题美化教程集锦[笔记]

3年前
1588
每周露天放映-楊仙森万事坞

每周露天放映

3年前
860
[Android]没认证的电视&盒子照样看奈飞的剧 - Netflix - Kodi Edition-楊仙森万事坞

[Android]没认证的电视&盒子照样看奈飞的剧 – Netflix – Kodi Edition[安卓TV端]

2年前
854
2022美国爆笑动画《小黄人大眼萌2：神偷奶爸前传 》4K/1080P中英双字-楊仙森万事坞

2022美国爆笑动画《小黄人大眼萌2：神偷奶爸前传 》4K/1080P中英双字

3年前
802
野火直播TV 5.2.5 (电视直播) 去广告版-楊仙森万事坞

野火直播TV 5.2.5 (电视直播) 去广告版

2年前
744
zibll添加一个灵动岛样式美化代码-楊仙森万事坞

zibll添加一个灵动岛样式美化代码

昨天
84
体验macOS网页版源码Webintosh-楊仙森万事坞

体验macOS网页版源码Webintosh

前天
79
谷歌Chrome浏览器 v132.0.6834.84 绿色增强版 Google Chrome-楊仙森万事坞

谷歌Chrome浏览器 v132.0.6834.84 绿色增强版 Google Chrome

3年前
461
子比美化专区-独立下载页美化样式增强版-楊仙森万事坞

子比美化专区-独立下载页美化样式增强版

18天前
53
子比美化专区 – 免费/付费资源背景底色修改-楊仙森万事坞

子比美化专区 – 免费/付费资源背景底色修改

18天前
87
子比美化专区-评论区无评论图片B站样式-楊仙森万事坞

子比美化专区-评论区无评论图片B站样式

18天前
63
小时候历史课趴着睡，长大了历史站看不够。带你了解各国全历史-楊仙森万事坞

小时候历史课趴着睡，长大了历史站看不够。带你了解各国全历史

3年前
176
《电锯惊魂10》温子仁強勢回歸！【正式预告】9/28(週四) 台湾抢先上映-楊仙森万事坞

《电锯惊魂10》温子仁強勢回歸！【正式预告】9/28(週四) 台湾抢先上映

2年前
139
蜘蛛侠手机壁纸来一波 spider-man【wallpaper for mobile】-楊仙森万事坞

蜘蛛侠手机壁纸来一波 spider-man【wallpaper for mobile】

3年前
171
2023美国惊悚《断网假期》HD1080P.中英双字-楊仙森万事坞

2023美国惊悚《断网假期》HD1080P.中英双字

2年前
87
2022剧场版《龙珠超：超级英雄》BD1080P-楊仙森万事坞

2022剧场版《龙珠超：超级英雄》BD1080P

3年前
223
2011韩国剧情《完美搭档》HD1080P-楊仙森万事坞

2011韩国剧情《完美搭档》HD1080P

2年前
155
60s读懂世界
标签云
黑豹2黑苹果黑神话悟空高清播放高德地图驱动管理饿了么免费吃食谱颜色拾取领取注册码预告片预告音乐软件音乐播放平台音乐播放器安卓版音乐播放器MacOS版音乐播放器iOS版音乐播放器音乐下载工具音乐MV