一道斜光从卡片左侧扫过,低调奢华的悬停反馈
← 返回 卡片 类特效列表上方为纯 CSS 实时演示,直接将鼠标移上去 / 点击感受效果
.fx .sh{position:relative;width:250px;height:150px;margin:40px auto;border-radius:14px;background:linear-gradient(135deg,#4a9eff,#a371f7);overflow:hidden}
.fx .sh::before{content:"";position:absolute;top:0;left:-60%;width:45%;height:100%;background:linear-gradient(120deg,transparent,rgba(255,255,255,.5),transparent);transform:skewX(-20deg)}
.fx .sh:hover::before{animation:kfx-sh .8s ease}
@keyframes kfx-sh{to{left:130%}}<div class="fx">
<div class="sh"></div>
</div>