🎨 ColorRotor｜カラフルに回転するCSSローディングアニメーション
ColorRotorは、シンプルながらも視線を引きつける、CSSだけで完結するローディングアニメーションです。
回転する3つのカプセルが10色に変化しながら、中央で美しいリズムを刻みます。
✅ 特徴
- CSSのみで構成（JavaScript不要）
- 10色のカラーグラデーション
- cubic-bezierによる緩急ある回転
- 汎用的：ローディングだけでなく装飾・アイコン演出にも応用可
- React風の形状ではなく、ハンバーガーメニューやボタンデザインにも展開可能
💡 こんな場面で使えます
- ページ遷移時のローディングUI
- ダークモード対応の装飾アクセント
- ハンバーガーメニュー開閉中の視覚的フィードバック
- シンプルなLPやポートフォリオでの印象強化
🧪 実装概要
/* 代表的な .capsule スタイル（抜粋） */
.capsule {
width: 30px;
height: 200px;
border: 4px solid #3399FF;
border-radius: 20px / 75px;
transform-origin: center center;
transform: translate(-50%, -50%) rotate(0deg);
animation:
colorCycle 2s linear infinite,
rotateToAngle 4s cubic-bezier(0.85, 0, 0.15, 1) infinite alternate;
}
アニメーションは以下の2つを組み合わせています：
colorCycle: 時間経過とともに10色に変化するアニメーションrotateToAngle: 緩急のある回転アニメーション（cubic-bezier）
🔗 デモはこちら
See the Pen Untitled by masakazuimai (@masakazuimai) on CodePen.
🏷️ 名前の由来
ColorRotor（カラーローター）は「色が変化する回転体」という意味で名付けました。
視覚的に心地よく、かつ目立ちすぎないデザインが特徴です。
🚀 カスタマイズ例
- 色数を変更してテーマに合わせる
- 回転速度を調整してUIの緩急を設計
- capsuleの本数を5〜6本に増やして複雑化する
- hover時にstopや逆回転などのインタラクション追加
📝 まとめ
ColorRotorは、CSSだけでここまで表現できる！という一つの参考例です。
小さなパーツにこそ遊び心やUIの差別化を加えて、印象に残るサイトを作りましょう！