zhibi主题美化代码

公告:荻酷网每天不定时为大家更新各种实用技术教程、编曲资源,脚本源代码,插件,软件应用等资讯、绝大部分资源都经过亲测演示,下载荻酷网客户端、获取最新资源不迷路。 下载说明:如果是种子链接请下载专用工具进行下载,其它网盘链接可直接访问下载。

老刘自己测试了zhibi最新7.3的开心版,主题使用功能上目前全部正常,就是差一些美化,老刘自己修改了一些,供参考,也作为老刘的备忘录。

css代码添加路径:

Zibll主题设置-全局&功能-自定义代码

css代码7.25更新

代码中侧栏小工具统计模块是插件的额外css代码,效果图如下

  • 20240604103038375-QQ截图20240604103019

     

  • CSS代码

    /*文章随机彩色标签*/
    .article-tags{
    margin-bottom: 10px
    }
    .article-tags a{
    padding: 4px 10px;
    background-color: #19B5FE;
    color: white;
    font-size: 12px;
    line-height: 16px;
    font-weight: 400;
    margin: 0 5px 5px 0;
    border-radius: 2px;
    display: inline-block
    }
    .article-tags a:nth-child(5n){
    background-color: #4A4A4A;color: #FFF
    }
    .article-tags a:nth-child(5n+1){
    background-color: #ff5e5c;color: #FFF
    }
    .article-tags a:nth-child(5n+2){
    background-color: #ffbb50;color: #FFF
    }
    .article-tags a:nth-child(5n+3){
    background-color: #1ac756;color: #FFF
    }
    .article-tags a:nth-child(5n+4){
    background-color: #19B5FE;color: #FFF
    }
    .article-tags a:hover{
    background-color: #1B1B1B;color: #FFF
    }
    /* logo扫光 */
    .navbar-brand{
    position:relative;
    overflow:hidden;
    margin: 0px 0 0 0px;
    }
    .navbar-brand:before{
    content:""; 
    position: absolute; 
    left: -465px; 
    top: -460px; 
    width: 240px; 
    height: 10px; 
    background-color: rgba(255,255,255,.5); 
    -webkit-transform: rotate(-45deg); 
    -moz-transform: rotate(-45deg); 
    -ms-transform: rotate(-45deg); 
    -o-transform: rotate(-45deg); 
    transform: rotate(-45deg); 
    -webkit-animation: searchLights 5s ease-in 0s infinite; 
    -o-animation: searchLights 5s ease-in 0s infinite; 
    animation: searchLights 5s ease-in 0s infinite;
    }
    @-moz-keyframes searchLights{50%{left: -100px; top: 0;} 65%{left: 120px; top: 100px;}}
    @keyframes searchLights{40%{left: -100px; top: 0;} 60%{left: 120px; top: 100px;} 80%{left: -100px; top: 0px;}}
    /* 鼠标放上去图片放大1.2 */
    .hover-zoom-img-sm:hover img, .hover-zoom-sm:hover, .posts-item.mult-thumb .thumb-items>span>img:hover, .posts-item:hover .item-thumbnail img, .posts-mini:hover img {
    transform:scale(1.2)!important;
    }
    /* 页首页脚宽度取消+180px */
    .container-footer, .container-header {
    max-width:calc(var(--mian-max-width) + 50px)!important;
    }
    /* 侧边栏小工具标题左移对齐 */
    .title-theme {
    margin-left:-15px!important;
    }
    /*头像呼吸光环和鼠标悬停旋转放大*/
    .avatar{border-radius: 50%; animation: light 4s ease-in-out infinite; transition: 0.5s;}.avatar:hover{transform: scale(1.15) rotate(720deg);}@keyframes light{0%{box-shadow: 0 0 4px #f00;} 25%{box-shadow: 0 0 16px #0f0;} 50%{box-shadow: 0 0 4px #00f;} 75%{box-shadow: 0 0 16px #0f0;} 100%{box-shadow: 0 0 4px #f00;}}
    /*滚动条显示样式*/  
    ::-webkit-scrollbar-thumb{
    background: #40E0D0;  /* fallback for old browsers */
    background: -webkit-linear-gradient(to top, #FF0080, #FF8C00, #40E0D0);  /* Chrome 10-25, Safari 5.1-6 */
    background: linear-gradient(to top, #FF0080, #FF8C00, #40E0D0); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
       height:50px;  
       outline-offset:-2px;  
       outline:2px solid #fff;  
       -webkit-border-radius:6px;  
       border: 2px solid #fff;  
    }  
    /*滚动条大小*/ 
    ::-webkit-scrollbar{  
       width:12px;  
       height:8px;  
    }  
    /*滚动框背景样式*/  
    ::-webkit-scrollbar-track-piece{  
       background-color:#fff;  
       -webkit-border-radius:0;  
    }
温馨提示:本文最后更新于2024-06-04 10:36:43,某些文章具有时效性,若有错误或已失效,请在下方留言
©版权声明
感谢您的阅读
喜欢就支持一下吧
点赞11 分享
评论 抢沙发
头像
欢迎您留下宝贵的见解!
提交
头像

昵称

夸夸
还有吗!没看够!
取消
昵称表情代码图片

    暂无评论内容