グラデーションを取り入れることで、よりサイトを魅力的に見せたりすることができます。
さらにアニメーションさせることで、視覚効果を与え、よりサイトの見栄えが良くなったりするので、
スマートフォン専用などcss3に対応したサイトで使用していきたいですね。
■アニメーションのさせ方
@keyframesとanimetion-nameでanimetionとのリンクをして、変化させたい要素を0%〜100%で指定します。
body { background-color : #6CB8FF ; animation: gradation 2 s infinite; } @keyframes gradation { 0% { background-color : #red ; } 50% { background-color : #blue ; } 100% { background-color : #green ; } } |