Mask Gradient Card
mask-imageのグラデーションがカード上を移動する光のスキャンエフェクト。
HTML
<div class="mgc-card"> <div class="mgc-scan"></div> <h3>Scan Effect</h3> <p>Light sweep animation</p> </div>
CSS
.mgc-card {
position: relative;
width: 260px;
padding: 32px;
background: #18181b;
border: 1px solid #27272a;
border-radius: 16px;
color: #e2e8f0;
overflow: hidden;
}
.mgc-card h3 { margin: 0 0 8px; font-size: 18px; }
.mgc-card p { margin: 0; font-size: 13px; opacity: 0.6; }
.mgc-scan {
position: absolute;
inset: 0;
background: linear-gradient(105deg, transparent 40%, rgba(99,102,241,0.08) 45%, rgba(99,102,241,0.15) 50%, rgba(99,102,241,0.08) 55%, transparent 60%);
background-size: 200% 100%;
animation: mgc-sweep 3s ease-in-out infinite;
}
@keyframes mgc-sweep {
0% { background-position: 200% 0; }
100% { background-position: -200% 0; }
}