天哥,下个版本直接用这个替换了吧

青衣 红尘云论坛 关注 VIP 九级站长
发表于网站建设版块 网站源码,CSS样式
天哥,下个版本替换一下吧,我加了logo和vip的光效动画,列表页也修缮了一下,可能里面有那些不对的,也请天哥看看如果想看效果进去看,我也就不录视频了

https://181xvx.com.cn

read.hst,一个是文章的,一个是列表的

                        <div class="vip-container">
                                <img class="pk-hide-md" src="{$replydata['usergroup']['icon']}" class="vip-icon" alt="{:t($replydata['usergroup']['usergroupname']):}" title="{:t($replydata['usergroup']['usergroupname']):}" style="margin-bottom:-3px;margin-right:5px;cursor:pointer;width:50px;height:20px" />
                                </div>

<div class="vip-container">
                    <img src="{$readdata['usergroup']['icon']}" alt="{:t($readdata['usergroup']['usergroupname']):}"  class="vip-icon" title="{:t($readdata['usergroup']['usergroupname']):}" style="margin-bottom:-3px;margin-right:5px;cursor:pointer;width:50px;height:20px" />
                    </div>
css

   /* VIP图标样式 */
    .vip-icon {
        height: 24px; /* 根据实际图标大小调整 */
        width: auto; /* 保持宽高比 */
        margin-right: 5px;
        cursor: pointer;
    }

    /* 光效层 */
    .vip-container::after {
        content: '';
        position: absolute;
        top: 0;
        left: -100%; /* 初始位置在左侧 */
        width: 100%;
        height: 100%;
        background: linear-gradient(
            90deg,
            rgba(255, 255, 255, 0) 0%,
            rgba(255, 255, 255, 0.8) 50%,
            rgba(255, 255, 255, 0) 100%
        );
        animation: flash 2s infinite; /* 光效动画 */
        pointer-events: none; /* 确保光效层不会遮挡点击事件 */
    }

    /* 光效动画 */
    @keyframes flash {
        0% {
            left: -100%;
        }
        100% {
            left: 100%;
        }
    }
head.hst(这是logo的)

这个不用改
css

/* Logo效果容器 */
    .v8-navbar-logo-div-box {
        position: relative;
        display: inline-block;
        width: 100% !important; /* 强制宽度为 100% */
        max-width: 100% !important; /* 防止溢出 */
    }

    /* 光效动画 */
    @keyframes flash {
        0% {
            transform: translateX(-100%) skewX(-30deg);
        }
        100% {
            transform: translateX(200%) skewX(-30deg);
        }
    }

    /* 光效层 */
    .v8-navbar-logo-div-box::after {
        content: '';
        position: absolute;
        top: 0;
        left: -100%; /* 初始位置在左侧 */
        width: 100%; /* 调整为 100% */
        height: 100%;
        background: linear-gradient(
            90deg,
            rgba(255, 255, 255, 0) 0%,
            rgba(255, 255, 255, 0.8) 50%,
            rgba(255, 255, 255, 0) 100%
        );
        animation: flash 1.5s infinite; /* 动画时间和循环 */
        transform: skewX(-30deg); /* 倾斜角度 */
        pointer-events: none; /* 确保光效层不会遮挡点击事件 */
    }

    /* 导航栏Logo样式 */
    .navbar-pc-logo,
    .navbar-m-logo {
        display: block;
        max-width: 100%; /* 防止 Logo 溢出 */
        height: auto; /* 保持宽高比 */
    }

    /* 移动端Logo隐藏 */
    .navbar-m-logo {
        display: none;
    }

    /* 响应式设计:移动端显示移动Logo */
    @media (max-width: 768px) {
        .navbar-pc-logo {
            display: none;
        }
        .navbar-m-logo {
            display: block;
        }
    }

评论列表 评论
chengfeng 资源网 VIP 八级站长 8#
那些特效在手机网页上不显示吗?只能在电脑页面上面显示
共2条回复,点击查看回复
chengfeng 资源网 VIP 八级站长 7#
都换上了logo特效有了。read.hst的特效没出来。需要修改代码吗?需要设置哪个用户组是vip吗?
共5条回复,点击查看回复
chengfeng 资源网 VIP 八级站长 6#
太乱了,看不懂。能重新编辑一下吗
共3条回复,点击查看回复
chengfeng 资源网 VIP 八级站长 5#
qq多少私聊一下
共0条回复,点击查看回复
chengfeng 资源网 VIP 八级站长 4#
网站打不开看不见效果   截图看看兄弟
共1条回复,点击查看回复
puyuetian 乐天 创始人 资深站长 3#
挺好的,你可以把闪光代码分享出来,大家后台嵌入一下就ok了
共1条回复,点击查看回复
青衣 红尘云论坛 VIP 九级站长 2#
当然,头像呼吸灯也可以加上css
.v8-read-author-username>img,
.v8-reply-author-username>img {
    float: left;
    width: 50px;
    height: 50px;
    margin-right: 9px;
    margin-top: -5px;
    margin-left: 9px;
    border-radius: 50%;
    
    border: solid 1px #EEEEEE; border-radius: 50%; width: 39px; height: 39px; animation: light 4s ease-in-out infinite; transition: 0.5s; } .pk-kxpc-userbox .uh: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; } }
    cursor: pointer;
}

共0条回复,点击查看回复
发布评论

评论: 天哥,下个版本直接用这个替换了吧

已有0次打赏
(2) 分享
分享

请保存二维码或复制链接进行分享

取消