悬浮扫光
鼠标悬浮触发一道斜向高光从左侧扫过,常用于按钮与卡片。
把鼠标移到方块上
这一条靠
:hover 触发,页面加载时不会自己播。鼠标移上去、再移开就能来回看。
参数调节
交互类动画由鼠标状态驱动,时长与缓动写在规则里的
transition / animation 上,改成下方代码里的数值即可。
完整代码
/* 悬浮扫光 */
.anim-hover-shine {
position: relative;
overflow: hidden;
}
.anim-hover-shine::after {
content: '';
position: absolute;
inset: 0;
background: linear-gradient(90deg, transparent, rgba(255,255,255,.65), transparent);
transform: translateX(-120%) skewX(-20deg);
transition: transform .6s ease;
pointer-events: none;
}
.anim-hover-shine:hover::after {
transform: translateX(120%) skewX(-20deg);
}