光反射するカードのCSSジェネレーター
マウスホバー時や一定間隔でカード表面を光の筋が走り抜ける反射演出を、CSSのみで実装します。
プレビュー
<div class="shine-card {{anime_trigger}}">
<span class="content">CARD CONTENT</span>
</div>.shine-card {
position: relative;
width: {{width}}px;
height: {{height}}px;
background-color: {{bg_color}};
border-radius: {{radius}}px;
overflow: hidden;
display: flex;
align-items: center;
justify-content: center;
}
.shine-card::before {
content: "";
position: absolute;
top: 0;
left: -150%;
width: 100%;
height: 100%;
background: linear-gradient(
to right,
transparent,
{{shine_color}}44,
transparent
);
transform: skewX({{skew}}deg);
pointer-events: none;
}
@keyframes anime-card-shine-ltr {
0% { left: -150%; }
30%, 100% { left: 150%; }
}
@keyframes anime-card-shine-rtl {
0% { left: 150%; }
30%, 100% { left: -150%; }
}
.shine-card.loop::before {
animation: anime-card-shine-{{direction}} calc({{speed}}s + {{delay}}s) infinite;
}
.shine-card.hover:hover::before {
animation: anime-card-shine-{{direction}} calc({{speed}}s + {{delay}}s) infinite;
}
.content {
display: block;
color: #fff;
font-weight: bold;
z-index: 1;
}機能、使い方
- 連続的な反射演出: マウス操作に関わらず、またはマウスを置いている間、一定間隔でカード表面を光が走り抜けます。
- 多角的なカスタマイズ: 光の速度、待機間隔に加え、角度（歪み）や移動方向（左右）を自由に調整できます。
- JS不要の軽量実装: 出力されたCSSは `@keyframes` のみを使用しており、追加のスクリプトなしで動作します。
CSSプロパティの説明
skewX(傾斜)
擬似要素を平行四辺形に変形させることで、垂直ではない自然な反射光の筋を作っています。
擬似要素の重なり
::beforeを絶対配置にし、親要素にoverflow: hiddenを指定することで、カードの輪郭に沿って光が切り抜かれるようにしています。
ループアニメーションの仕組み
移動時間と待機時間をcalc()で合算し、キーフレームの 30% 地点までで移動を完了させ、残りの 70% を待機時間として活用することで、一定間隔の繰り返しを実現しています。
