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

015525

使用教程

在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 (电视直播) 官方版
10个月前 2242
WP主题美化教程集锦[笔记]-楊仙森万事坞
WP主题美化教程集锦[笔记]
WP主题美化教程集锦[笔记]
2年前 1546
[Android]没认证的电视&盒子照样看奈飞的剧 – Netflix – Kodi Edition[安卓TV端]-楊仙森万事坞
[Android]没认证的电视&盒子照样看奈飞的剧 – Netflix – Kodi Edition[安卓TV端]
[Android]没认证的电视&盒子照样看奈飞的剧 – Netflix &#...
1年前 742
2022美国爆笑动画《小黄人大眼萌2：神偷奶爸前传 》4K/1080P中英双字-楊仙森万事坞
2022美国爆笑动画《小黄人大眼萌2：神偷奶爸前传 》4K/1080P中英双字
2022美国爆笑动画《小黄人大眼萌2：神偷奶爸前传 》4K/1080P中英双字
2年前 655
2023每天60秒知晓天下事！-楊仙森万事坞
2023每天60秒知晓天下事！
2023每天60秒知晓天下事！
2年前 587
苹果签名工具–牛蛙助手 无需证书移动端 ID 签名[iOS&MacOS]-楊仙森万事坞
苹果签名工具–牛蛙助手 无需证书移动端 ID 签名[iOS&MacOS]
苹果签名工具–牛蛙助手 无需证书移动端 ID 签名[iOS&MacOS...
1年前 561
相关推荐
评论 抢沙发

请登录后发表评论

    暂无评论内容

用户封面
楊仙森的头像-楊仙森万事坞扫地神僧
“隐蔽地图”之免费的阿里企业邮箱
mytv谢幕了、ourtv来了-电视直播无缝衔接
在iOS上安装hiddify及其他第三方应用
满足大多数人需求的电视直播软件-“IPv6版”的my-tv
开源的 Windows 12 网页体验版
黑神话悟空天命人mod替换
开启精彩搜索
要不要打个九折？专属优惠码：nfxp82
图片-楊仙森万事坞
星火直播/星火电视海外版 1.0.40.2 (电视直播) 官方版-楊仙森万事坞
2242人已阅读
星火直播/星火电视海外版 1.0.40.2 (电视直播) 官方版
TOP1
WP主题美化教程集锦-楊仙森万事坞
WP主题美化教程集锦[笔记]
2年前1546人已阅读
TOP2
每周露天放映-楊仙森万事坞
每周露天放映
2年前858人已阅读
TOP3
[Android]没认证的电视&盒子照样看奈飞的剧 - Netflix - Kodi Edition-楊仙森万事坞
[Android]没认证的电视&盒子照样看奈飞的剧 – Netflix – Kodi Edition[安卓TV端]
1年前742人已阅读
TOP4
2022美国爆笑动画《小黄人大眼萌2：神偷奶爸前传 》4K/1080P中英双字-楊仙森万事坞
2022美国爆笑动画《小黄人大眼萌2：神偷奶爸前传 》4K/1080P中英双字
2年前655人已阅读
TOP5
TV直播live-楊仙森万事坞
TV直播live
2年前595人已阅读
TOP6
2023每天60秒知晓天下事！-楊仙森万事坞
2023每天60秒知晓天下事！
2年前587人已阅读
TOP7
苹果签名工具--牛蛙助手 无需证书移动端 ID 签名-楊仙森万事坞
苹果签名工具–牛蛙助手 无需证书移动端 ID 签名[iOS&MacOS]
1年前561人已阅读
TOP8
60s读懂世界

1“隐蔽地图”之免费的阿里企业邮箱

2mytv谢幕了、ourtv来了-电视直播无缝衔接

3在iOS上安装hiddify及其他第三方应用

4满足大多数人需求的电视直播软件-“IPv6版”的my-tv

5开源的 Windows 12 网页体验版

6黑神话悟空天命人mod替换

7高德地图足迹打卡点如何清空？轮椅教程

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

9方格音乐 1.6.1(音乐免费下载)-免费无损播放去广告版[PC端]

10忍者神龟：施莱德的复仇 Build 14442522 全DLC 免安装绿色中文版[PC游戏]

11Fly音乐 1.2.3-Plus (安卓免费音乐) 去广告版[安卓]

12星露谷物语 1.6.8 全DLC 免安装绿色中文版

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

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

3每周露天放映

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

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

6TV直播live

72023每天60秒知晓天下事！

8苹果签名工具–牛蛙助手 无需证书移动端 ID 签名[iOS&MacOS]

92021喜剧动作《警醒》HD1080P[中英双字]

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

11TrollStore 巨魔助手 2 正式版详细安装教程

12MusicTools v1.9.8.3 全平台付费歌曲无损音乐下载工具绿色版[Windows]

1手机壁纸–猩红女巫旺达系列 WanDa【wallpaper for mobile】【壁纸】

2字幕下载站点推荐&如何使用

32021贾玲沈腾喜剧《你好，李焕英》

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

52023美剧《怒呛人生》全集 HD1080P

62022喜剧科幻动画《大白！》全6集.HD1080P

7《碟中谍7》片场阿汤哥飙骂剧组人员【录音】

82023国产恐怖《纸人回魂》HD1080P

92022战争《小野田的丛林万夜》HD1080P

102018纪录片《三级片：香港剥削电影不为人知的故事》HD720P

11圆梦就在不远处！灌篮主题曲哪首是你心中的No.1–青春承载

12R-Studio(数据恢复软件) v9.2.191230 便携修改版[PC端]

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

2马来黄 Ft. 蒼井空 最新MV《別人的老婆》2022 H.D. & Uncensored[MV]

3谷歌Chrome浏览器 v120.0.6099.225 绿色增强版 Google Chrome[PC端]

42022韩国悬疑《自白》HD1080P 韩版看不见的客人

52022意大利悬疑惊悚《黑眼镜》HD1080P

62022动画《哆啦A梦：大雄的宇宙小战争2021》HD1080P

72022日本惊悚犯罪《想被女子高中生杀掉》HD1080P

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

92022日本科幻冒险《唐》BD1080P

102023韩国恐怖《诅咒录影》HD1080P

112021迪士尼奇幻动画《夏日友晴天》HD1080P [高清中字]

12Free Netflix Download(网飞视频下载) v5.2.11.204[Windows]

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