アニメーションのひとつ
HTMLで動的な表現をする場合は、JavaScriptで記述すれば、かなり細かな動作を行うことができます。一方、HTMLにanimateメソッドがあり、CSSファイルの中に少ない記述で様々なアニメ表現を可能にしています。その中にグラデーション機能があります。
グラデーションとはホームページやブログの記述において、色や濃淡を連続した階調で表現することを言います。アニメーションについては探求を始めたばかりです。まずはグラデーションを使ってみます。
背景色を連続的に変更する
さんぷる
グラデーションのサンプルコード
<style>
#sample {
background-color: #6CB8FF;
animation: gradationTest 10s linear infinite;
}
@keyframes gradationTest {
0% { background-color: #6CB8FF; }
50% { background-color: #FFF66C; }
100% { background-color: #FFA36C; }
}
</style>
<body>
<DIV id="sample" style="width:600px; height:300px; font-size:136px; color:navy; border:1px solid deeppink;">さんぷる</DIV>
</body>
応用例
先週、人里離れた気まぐれの宿に動くキャッチコピーを表現しました。こんどは次の図をクリックしてグラデーションをお楽しみください。
