悬停扫光卡片 · 卡片
前端Wiki/CSS 特效合集/悬停扫光卡片

悬停扫光卡片

一道斜光从卡片左侧扫过,低调奢华的悬停反馈

← 返回 卡片 类特效列表

上方为纯 CSS 实时演示,直接将鼠标移上去 / 点击感受效果

CSS 代码

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

HTML 结构

HTML
<div class="fx">
<div class="sh"></div>
</div>
实现要点:skew 渐变伪元素 + left 平移动画;overflow:hidden 裁剪

其它卡片类特效

回到 前端Wiki 首页 · CSS 特效合集