CSSアニメーショングラデーションボーダージェネレーター

回転する虹の境界線は、CSS で実際に作成してみるまでは単純に見えます。単純なカスタム プロパティを使用して conic-gradient() 内で角度をアニメーション化しても、何も役に立ちません。ブラウザーは値が角度であることを認識せず、0 度から 360 度の間を補間することができず、ジャンプするだけです。このジェネレーターは、実際の修正である CSS プロパティと値 API を使用します。 `@property --border-angle { syntax: '<angle>';初期値: 0度;継承: false; }` は、カスタム プロパティが保持する値の種類をブラウザーに正確に伝えます。これにより、@keyframes ルール全体にわたるスムーズで GPU フレンドリーな補間のロックが解除されます。

リング自体は、ボックス (境界線の幅を差し引いて挿入) より大きいサイズの ::before 擬似要素で、背景が `conic-gradient(from var(--border-angle), ...)` に設定され、最初の色にループバックするため、スイープに目に見える継ぎ目はありません。次に、マスクが実際の整形作業を行います。 Mask-composite: exclude;` は、パディング ボックスとコンテンツ ボックスの間のリング状の差分のみを保持し、他の場所では実線のグラデーション四角形を破棄します。 Safari の古い `-webkit-mask-composite:xor` は同じ操作を実行し、標準プロパティと一緒に出荷されるため、1 つのエンジンでサイレントに失敗するのではなく、一貫して効果がレンダリングされます。

境界半径のサポートは、後付けで追加されたものではありません。疑似要素の「border-radius:inherit」は、ボックスにダイヤルした半径が自動的にリングに引き継がれることを意味します。そのため、錠剤の形をしたボタンや丸いカードには、湾曲した角からにじみ出る直線的なエッジの代わりに、丸い輝く境界線が表示されます。ライブでテストします。半径スライダーを鋭い長方形から丸薬までドラッグし、各ステップでリングがその形状に従うのを確認します。これが、このテクニックの実際の実装と偽のスクリーンショットを区別する詳細です。

ページ上の他のものはすべて、生成されたコードに直接マッピングされます。幅スライダーはリングの厚さと疑似要素のインセット/パディング、持続時間スライダーは @keyframes アニメーション持続時間、方向スイッチはキーフレームの終了角度の符号 (+360 度または -360 度) を反転するだけで、各カラー ストップは conic-gradient() 呼び出し内のカンマ区切りのエントリです。画像、JavaScript によるアニメーション ループ、外部サービスを使用せずに、すべてがブラウザ内で実行されます。CSS ブロックをコピーすると、どこに貼り付けても回転し続けます。