[CSS3]animationで背景色を変化させる
昨日の授業の復習。
CSS3のanimationで背景色を変化させる
画像はPhotoshopで用意。文字や太陽のシェイプの部分をくり抜き、
背景色が見えるようにする.
サーバーにアップしたのはこのアドレスから見られます
http://webtre.ikidane.com/css3/
div { animation: bg-color 10s infinite; -webkit-animation: bg-color 10s infinite; width: 300px; height: 300px; padding: 10px; } @-webkit-keyframes bg-color { 0% {background: yellow;} 25% {background: orange;} 50% {background: red;} 75% {background: orange;} 100% {background: yellow;} } @-moz-keyframes bg-color { 0% {background: yellow;} 25% {background: orange;} 50% {background: red;} 75% {background: orange;} 100% {background: yellow;} } @keyframes bg-color { 0% {background: yellow;} 25% {background: orange;} 50% {background: red;} 75% {background: orange;} 100% {background: yellow;} }
HTML
<body> <div> <img src="img/animation.png" alt=""> </div> </body>