cssによるdivバックグラウンドカラーのダイナミックグラデーション
1547 ワード
クールな現代風のページを作るとき、divの色はダイナミックで、絶えず変化している可能性があります.次に、この効果がどのように実現されたのかを説明します.
使用するcssメソッド:
(1)linear-gradient:グラデーションを設定する色:background:linear-gradient(90 deg,#496 eaa,#944 fa 8,#a 8804 f,#496 eaa);
ここで、色の変化の一貫性を保証するために、最初の色属性は最後の色属性と一致することが望ましい(必須ではなく、視覚効果を満たすためだけ)
(2)animation(IEとgoogleブラウザは-webkit-animationまたは-moz-animationを使用する必要があります):色のグラデーションの動作を定義します.
@keyframes mymove { 0%{ background-position: 0% 0%; } 50%{ background-position: 50% 100%; } 100%{ background-position: 100% 0%; }
}
これは定義された具体的な動作です.
サンプルソースのテスト:
使用するcssメソッド:
(1)linear-gradient:グラデーションを設定する色:background:linear-gradient(90 deg,#496 eaa,#944 fa 8,#a 8804 f,#496 eaa);
ここで、色の変化の一貫性を保証するために、最初の色属性は最後の色属性と一致することが望ましい(必須ではなく、視覚効果を満たすためだけ)
(2)animation(IEとgoogleブラウザは-webkit-animationまたは-moz-animationを使用する必要があります):色のグラデーションの動作を定義します.
@keyframes mymove { 0%{ background-position: 0% 0%; } 50%{ background-position: 50% 100%; } 100%{ background-position: 100% 0%; }
}
これは定義された具体的な動作です.
サンプルソースのテスト:
Document