在给 程序员 的设计学习指南上看到一个图标在不停的旋转，觉得很好玩。于是在好奇心的驱使下，整理出网页中使用.css文件。照葫芦画瓢的弄出大概的效果。


使用CSS实现图片的旋转，有三部分组成：1个HTML文件（Index.html）、1个CSS文件（spin.css）和几张图片。


首先，spin.css文件

.fa{
	display:inline-block;
	font:normal normal normal 14px/1 FontAwesome;
	font-size:inherit;
	text-rendering:auto;
	-webkit-font-smoothing:antialiased;
	-moz-osx-font-smoothing:grayscale
}



.fa-spin{
	-webkit-animation:fa-spin 2s infinite linear;
	animation:fa-spin 2s infinite linear
}

@-webkit-keyframes fa-spin{
	0%{
		-webkit-transform:rotate(0deg);
		transform:rotate(0deg)
	}

	100%{
		-webkit-transform:rotate(359deg);
		transform:rotate(359deg)
	}

}

@keyframes fa-spin{
	0%{
		-webkit-transform:rotate(0deg);
		transform:rotate(0deg)
	}

	100%{
		-webkit-transform:rotate(359deg);
		transform:rotate(359deg)
	}

}

.fa-rotate-90{
	filter:progid:DXImageTransform.Microsoft.BasicImage(rotation=1);
	-webkit-transform:rotate(90deg);
	-ms-transform:rotate(90deg);
	transform:rotate(90deg)
}

.fa-rotate-180{
	filter:progid:DXImageTransform.Microsoft.BasicImage(rotation=2);
	-webkit-transform:rotate(180deg);
	-ms-transform:rotate(180deg);
	transform:rotate(180deg)
}

.fa-rotate-270{
	filter:progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
	-webkit-transform:rotate(270deg);
	-ms-transform:rotate(270deg);
	transform:rotate(270deg)
}

接下来是index.html文件


			
    

最后是张图片