<p>先細のグラデーションをアニメーション化していますが、色の変化が十分に滑らかではありません
さまざまな記事を見ましたが、正しく再現できません
私のコードはここにあります: </p>
<pre class="brush:php;toolbar:false;"><style>
体{
最小高さ: 100vh;
ディスプレイ: フレックス;
整列項目: 中央;
コンテンツの位置揃え: 中央;
}
.ピラミッド{
幅: 500ピクセル;
高さ: 500ピクセル;
背景画像: 円錐グラデーション(赤 135 度、緑 135 度、黄 165 度、黄 165 度);
クリップパス: ポリゴン(50% 50%、0% 100%、100% 100%);
アニメーション: 1 秒の緩和を無限に変更します。
}
.ピラミッド:ホバー{
背景画像: conic-gradient(赤 135 度、#cadfca 135 度、#dddd3f 165 度、#aeae30 165 度);
}
@キーフレーム変更{
0%{
背景画像: 円錐グラデーション(赤 135 度、黄色 135 度、黄色 165 度、ライトピンク 165 度);
/*背景: 赤;*/
}
50%{
背景画像: conic-gradient(赤 135 度、#cadfca 135 度、#dddd3f 165 度、#aeae30 165 度);
}
100%{
背景画像: 円錐グラデーション(赤 135 度、#565644 135 度、#838314 165 度、#a68f03 165 度)
}
}
</スタイル>
</head>
<本体>
</div>
</body></pre>
<p>変更をよりスムーズに行う方法</p>
![[Web フロントエンド] Node.js クイック スタート](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
背景画像が希望どおりにスムーズにアニメーションしません。
ただし、不透明度をスムーズにアニメーション化することはできるので、効果を得る 1 つの方法は、2 つの背景画像を重ねて配置し、一方から他方に徐々に変化するように不透明度を変更することです。
あなたの場合、要素自体ではなく、疑似要素の前後に背景画像を配置できます。
これらは同じアニメーション効果を持っていますが、一方は中央から始まります(不透明度が 1 の場合)。
合計の継続時間が 1 秒しかない場合、ブレンド効果を実感するのは難しいため、このコード スニペットでは継続時間を長くして、効果を確認できるようにしています。
もちろん、必要に応じてタイミングを変更することができます。
変化も線形であるため、オーバーレイは常に半透明の画像ではなく「全体」の画像を提供します。