QQ靓字标识徽标美化样式
在百度搜索时发现一个卖QQ靓号的网站，做的不错，研究了一下，保留记录了一下这个靓字徽标样式，以备后用。默认扫光是配合黑金的金黄色，其他的可以自行搭配合适颜色哈。HTML代码
<span title="黑金靓号" class="type-badge-image-wrap">
<img alt="黑金靓号" class="type-badge-image" src="/type-blackgold.svg">
<span aria-hidden="true" class="type-badge-image-label detail-gradient-text-gold">黑金</span>
</span>
<span title="黑金靓号" class="type-badge-image-wrap">
<img alt="黑金靓号" class="type-badge-image" src="/type-rainbow.svg">
<span aria-hidden="true" class="type-badge-image-label detail-gradient-text-gold">炫彩</span>
</span>
<span title="黑金靓号" class="type-badge-image-wrap">
<img alt="黑金靓号" class="type-badge-image" src="/type-normal.svg">
<span aria-hidden="true" class="type-badge-image-label detail-gradient-text-gold">普</span>
</span>
<span title="黑金靓号" class="type-badge-image-wrap">
<img alt="黑金靓号" class="type-badge-image" src="/type-liang.svg">
<span aria-hidden="true" class="type-badge-image-label detail-gradient-text-gold">普金靓</span>
</span>
<span title="黑金靓号" class="type-badge-image-wrap">
<img alt="黑金靓号" class="type-badge-image" src="/type-gold.svg">
<span aria-hidden="true" class="type-badge-image-label detail-gradient-text-gold">黄金靓</span>
</span>CSS代码
/* 核心：控制徽章大小（解决图片太大） */
.type-badge-image-wrap {
position: relative;
display: inline-flex;
align-items: center;
justify-content: center;
overflow: hidden;
border-radius: 4px;
/* 固定尺寸，强制缩小图片 */
width: 42px;
vertical-align: middle;
}
.md\:w-10 {
width: 2.5rem;
}
.md\:h-6 {
height: 1.5rem;
}
/* 图片自适应容器，不溢出 */
.type-badge-image {
display: block;
width: 100%;
height: 100%;
object-fit: contain;
}
/* 金色渐变文字（靓号专属） */
.type-badge-image-label {
position: absolute;
inset: 0;
display: flex;
align-items: center;
justify-content: center;
font-size: 12px;
font-weight: 900;
pointer-events: none;
/* 金色渐变 */
background: linear-gradient(to right, #ffd700, #daa520, #ffeb7a);
background-clip: text;
-webkit-background-clip: text;
color: transparent;
-webkit-text-fill-color: transparent;
}
/* 闪光动画（保留原效果） */
.type-badge-image-wrap::after {
content: "";
position: absolute;
top: -42%;
bottom: -42%;
left: -55%;
width: 42%;
pointer-events: none;
opacity: 0;
transform: rotate(22deg);
background: linear-gradient(90deg, transparent, rgba(250,204,21,0.36), rgba(255,244,170,0.9), rgba(250,204,21,0.36), transparent);
mix-blend-mode: screen;
animation: typeBadgeShine 3s infinite;
}
@keyframes typeBadgeShine {
0% { transform: translateX(-240%) rotate(22deg); opacity: 0; }
8% { opacity: .95; }
44% { transform: translateX(235%) rotate(22deg); opacity: .9; }
100% { transform: translateX(220%) rotate(22deg); opacity: 0; }
} 好东西，学习一下！
页:
[1]