后退
榜单

【子比兔出品】子比首页榜上有名和挂件美化

通知图标

正在访问 【子比兔出品】子比首页榜上有名和挂件美化

【子比兔出品】子比首页榜上有名和挂件美化

演示效果:https://n.zib2.cn/

编辑zibll/inc/functions/zib-header.php

在58行<nav class="navbar navbar-top 前面插入代码

<div class="rabbit-doll"></div>
【子比兔出品】子比首页榜上有名和挂件美化

上传附件的zibll目录下的文件到zibll目录下

在zibll/index.php增加一行代码

    <?php get_template_part('zib2/bsym'); ?>
【子比兔出品】子比首页榜上有名和挂件美化

加入css到zibll/zib2.css下

   /*新年悬挂开始*/

@keyframes lampLine-38cc6824 {
    0% {
        transform: rotate(10deg)
    }

    to {
        transform: rotate(-10deg)
    }
}

.rabbit-doll {
    width: 200px;
    height: 200px;
    display: inline-block;
    background: url(/pic/long.webp) no-repeat 50%/100%;
    vertical-align: middle;
    position: absolute;
    left: 80%;
    top: 25px;
    z-index: 50;
    cursor: pointer;
    animation: lampLine-38cc6824 1.2s ease-in-out 0s infinite alternate;
    margin-left: -1px;
    transform-origin: 50% 0;
    pointer-events:none;
}
          /*新年悬挂结束*/
/**用户排行榜开始*/
         .hot-top    .left {
                float: left;
            }
.hot-top .right .top-ul li a h3 {

    white-space: nowrap;
}
       .hot-top      .right {
                float: right;
            }

            img {
                border: none;
            }

            .hot-top {
                width: 100%;
                background: var(--main-bg-color);
                margin-bottom: 25px;
                padding: 22px 20px;
                position: relative;
                height: 147px;
                overflow: hidden;
                border-radius: 10px 10px 10px 10px;
            }

            .hot-top .tg-ph {
                background-size: 100% 100%;
                position: absolute;
                right: 0;
                top: 0;
                z-index: 2;
                display: block;
                width: 60px;
                height: 60px;
            }

            .hot-top .left {
                height: 100%;
            }

            .hot-top .left a {
                display: block;
                width: 121px;
                height: 45px;
                line-height: 45px;
                background: #f6f6f6;
                text-align: center;
                font-size: 15px;
                color: #989898;
                margin-bottom: 13px;
                cursor: pointer;
                border-radius: 10px;
            }

            .hot-top .left a:last-child {
                margin-bottom: 0;
            }

            .hot-top .left .hover {
                background: #2b21fa;
                color: #FFF;
                position: relative;
            }

            .hot-top .left .hover:after {
                content: "";
                width: 0;
                height: 0;
                border-top: 7px solid transparent;
                border-bottom: 7px solid transparent;
                border-left: 10px solid #2b21fa;
                position: absolute;
                top: 15.5px;
                right: -10px;
                z-index: 1;
            }

            .hot-top .right-main {
                height: 100%;
                    white-space: nowrap;
    overflow-y: hidden;
    overflow-x: auto;
                margin-bottom: 30px;
            }

            .hot-top .right-main:last-child {
                margin-bottom: 0px;
            }

            .hot-top .right-overflow {
                transition: 0.4s all;
                transform: translateY(0);
            }

            .hot-top .right {
                float: left;
                width: calc( 100% - 147px);
                margin-left: 26px;
                height: 100%;
            }

            .hot-top .right .top-ul {
                height: 130px;
                
            }

            .hot-top .right .top-ul li {
                width: 78px;
                float: center;
                margin:0px 20px;
                display:inline-block;
            }

            .hot-top .right .top-ul li:nth-child(10n) {
                margin-right: 0;
            }

            .hot-top .right .top-ul li a {
                display: block;
            }

            .hot-top .right .top-ul li a .list-img {
                width: 100%;
                height: 78px;
                line-height: 78px;
                text-align: center;
                border-radius: 10px;
            }

            .hot-top .right .top-ul li a .list-img img {
                width: 100%;
            }

            .hot-top .right .top-ul li a .list-img img:hover {
                opacity: 0.8;
            }

            .hot-top .right .top-ul li a h3 {
                margin-top: 7px;
                font-size: 13px;
                line-height: 25px;
                height: 25px;
                overflow: hidden;
                width: 100%;
                text-align: center;
            }

            .new-position {
                height: 780px;
            }

            .new-position .left {
                height: 100%;
                width: calc( ( 100% - 13px ) * 0.36 );
            }

            .new-position .right {
                width: calc( ( 100% - 13px ) * 0.64 );
                height: 100%;
                background: #FFF;
                padding: 17px 28px;
            }

            .new-position .layui-carousel > [carousel-item] > * {
                background: #FFF;
            }

            .new-position #index-lb {
                height: 300px;
            }

            .new-position #index-lb div div img {
                width: 100%;
                min-height: 100%;
            }

            .new-position .index-login {
                background: #FFF;
                margin-top: 13px;
                height: calc( 767px - 300px);
                padding: 25px 33px;
                position: relative;
            }

            span.note {
                position: absolute;
                top: 10px;
                right: -50px;
                z-index: 1;
                width: 140px;
                height: 20px;
                background: #2c40a0;
                color: #fff;
                line-height: 20px;
                -webkit-transform: rotate(45deg);
                transform: rotate(45deg);
                text-align: center;
                font-size: 12px;
            }
img.rela {
    position: absolute;
    left: 52px;
    z-index: 2;
    /* right: 50px; */
    top: 58px;
    height: 25px;
    width: 25px;
}

 /*头像呼吸光环和鼠标悬停旋转放大开始*/
             .list-img img.avatar {
                border-radius: 50%;
                animation: light 4s ease-in-out infinite;
                transition: 2s;
                
            }

          .list-img  img.avatar:hover {
                transform: scale(1) rotate(720deg);
            }
        

        /*头像呼吸光环和鼠标悬停旋转放大结束*/
            /**用户排行榜结束*/

pic文件夹上传至网站根目录下

下载权限
查看
  • 免费下载
    评论并刷新后下载
    登录后下载
  • {{attr.name}}:
您当前的等级为
登录后免费下载登录 小黑屋反思中,不准下载! 评论后刷新页面下载评论 支付以后下载 请先登录 您今天的下载次数(次)用完了,请明天再来 支付积分以后下载立即支付 支付以后下载立即支付 您当前的用户组不允许下载升级会员
您已获得下载权限 您可以每天下载资源次,今日剩余
声明:本站所有文章,如无特殊说明或标注,均为本站原创发布。任何个人或组织,在未征得本站同意时,禁止复制、盗用、采集、发布本站内容到任何网站、书籍等各类媒体平台。如若本站内容侵犯了原著者的合法权益,可联系我们进行处理。

给TA打赏
共{{data.count}}人
人已打赏
子比美化

【子比兔出品】子比的GO跳转两种美化风格:简约科技与温馨复古

2024-8-1 16:24:18

子比美化

【子比兔出品】子比侧边栏悬浮按钮美化

2024-8-2 15:57:48

5 条回复 A文章作者 M管理员
夸夸
夸夸
还有吗!没看够!
  1. 非凡

    感谢作者精妙绝伦的文章!

    UID.0338
  2. 闲云笔记

    感谢作者精妙绝伦的文章!

    UID.0388
  3. 木叶村

    感谢作者精妙绝伦的文章!

    UID.0417
  4. 过客

    感谢作者精妙绝伦的文章!

    UID.0462
  5. 过客

    对于大神的文章我真是百看不厌!

    UID.0462
个人中心
购物清单
优惠代劵
今日签到
有新私信 私信列表
快速搜索
联系客服
关注我们
  • 扫码打开当前页