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>