悬停时一道斜光从左扫到右,低调而有质感
← 返回 按钮 类特效列表上方为纯 CSS 实时演示,直接将鼠标移上去 / 点击感受效果
.fx .sheen{position:relative;display:block;width:180px;margin:40px auto;padding:13px 0;text-align:center;border-radius:10px;background:#222;color:#fff;font-size:15px;overflow:hidden;cursor:pointer;border:1px solid #333}
.fx .sheen::before{content:"";position:absolute;top:0;left:-60%;width:50%;height:100%;background:linear-gradient(120deg,transparent,rgba(255,255,255,.35),transparent);transform:skewX(-20deg)}
.fx .sheen:hover::before{animation:kfx-sheen .7s ease}
@keyframes kfx-sheen{to{left:120%}}<div class="fx">
<button class="sheen">光影扫过</button>
</div>