虹色に輝く枠線（レインボー・ローテート）のCSSジェネレーター
枠線が虹色に変化しながら回転し続ける視覚効果を生成します。conic-gradientを活用し、画像不要で軽量な実装が可能です。
プレビュー
<div class="rainbow-border">
<div class="inner-content">
Rainbow Border
</div>
</div>.rainbow-border {
position: relative;
width: fit-content;
padding: {{border_w}}px;
border-radius: {{border_r}}px;
overflow: hidden;
display: flex;
align-items: center;
justify-content: center;
}
.rainbow-border::before {
content: "";
position: absolute;
width: 500%;
height: 500%;
background: conic-gradient(
#ff0000, #ff7f00, #ffff00, #00ff00, #0000ff, #4b0082, #8b00ff, #ff0000
);
animation: rotate-border {{duration}}s linear infinite;
}
.inner-content {
position: relative;
background: {{inner_bg}};
padding: 20px 40px;
border-radius: calc({{border_r}}px - {{border_w}}px);
z-index: 1;
width: 300%;
height: 300%;
display: flex;
align-items: center;
justify-content: center;
}
@keyframes rotate-border {
100% {
transform: rotate(360deg);
}
}機能、使い方
- 枠線が虹色に変化しながら回転し続ける視覚効果を生成します。
conic-gradient（円錐グラデーション）を背面で回転させ、内側の要素でマスクすることで枠線のように見せています。- 枠線の太さ、角丸、アニメーションの速度をリアルタイムに調整可能です。
- バナーやカード、目立たせたいボタンの装飾として利用できます。
CSSプロパティの説明
conic-gradientは中心点を軸として色が変化するグラデーションを生成します。
overflow: hiddenを親要素に指定することで、回転している巨大なグラデーション要素の、枠線外の部分を隠しています。
::before擬似要素をrotateアニメーションで回転させることで、色が循環して流れるような動きを実現しています。
calc関数を使用して、内側の要素の角丸を外側の角丸と枠線の太さに合わせて自動計算し、隙間のない配置を維持しています。
