使用CSS让图片旋转起来

在给 程序员 的设计学习指南上看到一个图标在不停的旋转,觉得很好玩。于是在好奇心的驱使下,整理出网页中使用.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文件

<html>
	<head>		
    <link rel="stylesheet" href="css/spin.css">
	</head>
	<body>
		<img src="css/p6.png" class="fa fa-spin" style="width:50px;height:50px"/>
		<img src="css/p3.png" class="fa fa-spin" style="width:50px;height:50px"/>
		<img src="css/p5.jpg" class="fa fa-spin"/>
	</body>
</html>

最后是张图片


aHR0cDovL29sZC54bXNvZ28uY29tL3VwZmlsZS8y









你可能感兴趣的:(css,图片)