漫画風の集中線（アニメーション集中線）CSSジェネレーター
漫画やアニメで使われる迫力のある集中線をCSSで生成します。アニメーション速度や線の密度を自由に調整可能です。
プレビュー
<div class="speed-lines-container">
<div class="speed-lines"></div></div>.speed-lines-container {
position: relative;
width: 100%;
height: 400px;
background-color: {{bg_color}};
overflow: hidden;
display: flex;
align-items: center;
justify-content: center;
}
.speed-lines {
position: absolute;
inset: -100%;
background: repeating-conic-gradient(
from 0deg,
{{line_color}} 0 {{line_width}}deg,
transparent {{line_width}}deg {{line_gap}}deg
);
-webkit-mask-image: radial-gradient(circle, transparent {{center_size}}%, black {{center_size}}%);
mask-image: radial-gradient(circle, transparent {{center_size}}%, black {{center_size}}%);
animation: anime-speed-lines {{speed}}s linear infinite;
}
.content {
position: relative;
z-index: 1;
color: {{line_color}};
font-weight: bold;
font-size: 2.5rem;
text-shadow:
2px 2px 0 {{bg_color}},
-2px -2px 0 {{bg_color}},
2px -2px 0 {{bg_color}},
-2px 2px 0 {{bg_color}};
}
@keyframes anime-speed-lines {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}機能、使い方
- 漫画風の迫力:
conic-gradientを使用して、中心から放射状に広がる集中線を再現しています。 - 自由なカスタマイズ: 線の密度、アニメーション時間、中心の空き具合を調整することで、様々なシーンに対応可能です。
- アニメーション対応: CSSアニメーションにより、常に動き続ける動的な集中線を作成できます。
- レスポンシブ設計:
inset属性とマスク処理により、親要素のサイズが変わっても中心を保ったまま表示されます。
CSSプロパティの説明
repeating-conic-gradient
中心を軸とした扇状のグラデーションを繰り返すことで、放射状の線を1枚の背景画像として描画しています。
mask-image
中心部を透明にするためにmask-imageを使用しています。これにより、背後の要素が綺麗に透けるようになります。
inset: -100%
回転時の角の欠けを防ぐため、要素自体を親要素よりも大きく広げた状態で回転させています。
