CSS3-旋轉齒輪

查看DEMO

通過 CSS3，我們能夠創建動畫，這可以在許多網頁中取代動畫圖片、Flash 動畫以及 JavaScript。

先來認識一下css3的animation

animation的簡寫animation: name duration timing-function delay iteration-count direction;

其次就是@keyframes

好了，接下來運用上述兩個屬性做一個可以旋轉的齒輪

<style>
	.img {
		margin: 0 auto;
		text-align: center;
		 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>

總結

以上是生活随笔為你收集整理的CSS3-旋转齿轮的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。