ホームページ >ウェブフロントエンド >htmlチュートリアル >CSS3-回転歯車_html/css_WEB-ITnose
CSS3-回転歯車
デモを見る
CSS3 を使用すると、多くの Web ページのアニメーション画像、Flash アニメーション、JavaScript を置き換えることができるアニメーションを作成できます。
まず、css3 のアニメーションについて理解しましょう
アニメーションの略語 アニメーション: 名前、期間、タイミング、関数、遅延、反復回数、方向;
**2 番目はキーフレームです* *
さて、次は上記の 2 つのプロパティを使用して回転歯車を作成します
<style> .img { margin: 0 auto; text-align: center; width: 400px; height: 400px; padding: 0; animation-name:myrotate; animation-duration:3s; animation-timing-function:linear; animation-delay:0s; animation-iteration-count:infinite; animation-direction:normal; animation-play-state:running; -moz-animation-name:myrotate; -moz-animation-duration:3s; -moz-animation-timing-function:linear; -moz-animation-delay:0s; -moz-animation-iteration-count:infinite; -moz-animation-direction:normal; -moz-animation-play-state:running; -webkit-animation-name:myrotate; -webkit-animation-duration:3s; -webkit-animation-timing-function:linear; -webkit-animation-delay:0s; -webkit-animation-iteration-count:infinite; -webkit-animation-direction:normal; -webkit-animation-play-state:running; -o-animation-name:myrotate; -o-animation-duration:3s; -o-animation-timing-function:linear; -o-animation-delay:0s; -o-animation-iteration-count:infinite; -o-animation-direction:normal; -o-animation-play-state:running; } @keyframes myrotate { from {transform: rotate(0deg);} to {transform: rotate(360deg);} } @-moz-keyframes myrotate { from {-moz-transform: rotate(0deg);} to {-moz-transform: rotate(360deg);} } @-webkit-keyframes myrotate { from {-webkit-transform: rotate(0deg);} to {-webkit-transform: rotate(360deg);} } @-o-keyframes myrotate { from {-o-transform: rotate(0deg);} to {-o-transform: rotate(360deg);} }</style><div class="img"> <img src="chilun.png" alt=""></div>