用この流動的な枠線効果をデモンストレーションするために
このような枠線効果は、実際には非常にシンプルですhtmlにはdiv要素が1つだけあります
<div class="box1"></div>
css でグラデーションの背景を設定します
.box1::after {
content: '';
position: absolute;
inset: 8px;
background: #eee;
border-radius: inherit;
}
.box1 {
position: relative;
height: 300px;
width: 500px;
margin: 0 auto;
border-radius: 5px;
background: linear-gradient(0deg,#4ddcff,#2c67e3 54%,#5e00c2);
}
効果は次のようになります
ここで、誰かが言うでしょう、「なぜこれは動かないのですか？」 それでは、どのようにして動かすことができるのでしょうか まず、アニメーションを追加してみましょう.box {
position: relative;
height: 300px;
width: 500px;
margin: 0 auto;
border-radius: 5px;
background: linear-gradient(0deg,#4ddcff,#2c67e3 54%,#5e00c2);
animation: border 3s linear infinite;
}
@keyframes border {
to {
background: linear-gradient(360deg,#4ddcff,#2c67e3 54%,#5e00c2);
}
}
試してみると、効果がないことに気付くでしょう。では、前の記事で紹介した CSS 変数は機能しますか？
.box {
--dec:0deg;
position: relative;
height: 300px;
width: 500px;
margin: 0 auto;
border-radius: 5px;
background: linear-gradient(var(--dec),#4ddcff,#2c67e3 54%,#5e00c2);
animation: border 3s linear infinite;
}
@keyframes border {
to {
--dec:360deg;
}
}
それでも機能しません
根本的な原因は、ブラウザがこの背景をレンダリングする際に、開発者の干渉を受けないためです
しかし、CSS には Houdini API というものがあります。この API は何をするためのものですか
簡単に言えば、開発者に CSS の基礎的な API を公開し、開発者がこのインターフェースを使用して CSS を拡張し、開発者がブラウザのレンダリングエンジンのスタイルとレイアウトプロセスに介入できるようにするものです
では、実際にデモンストレーションしてみましょう
まず、カスタム CSS プロパティを定義します
@property --dir {
syntax: '<angle>'; //値を受け取る lenght color など
initial-value: 0deg; //デフォルト値
inherits: false;// 継承可能かどうか
}
使用する際は、CSS 変数と同じように使用します
.box {
--dir:0deg;
position: relative;
height: 300px;
width: 500px;
margin: 0 auto;
border-radius: 5px;
background: linear-gradient(var(--dir),#4ddcff,#2c67e3 54%,#5e00c2);
animation: border 3s linear infinite;
}
@keyframes border {
to {
--dir:360deg;
}
}
ただし、これは CSS プロパティであるため、レンダリングプロセスに参加することができるため、アニメーションでこのプロパティの値を変更すると効果があります
現時点では、この方法の互換性は不明です。興味がある場合は、互換性をテストしてください。本番環境での使用は慎重に行ってください
ほとんどのブラウザがサポートしている場合、以前は想像もできなかったことができるようになります