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; } }