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