css3旋转的大风车动画特效

http://www.oschina.net/code/snippet_2671046_55494

css文件

@charset "utf-8";
.loading{background:url(http://hovertree.com/texiao/css3/9/images/fcbg.png);width:320px;height:500px;margin:auto;position:relative;margin-top:200px;z-index:2}
.pic{
	background:url(http://hovertree.com/texiao/css3/9/images/fc.png);position:absolute;z-index:1;right:60px;width:427px;height:430px;top:-170px;
	-webkit-animation:load 2s linear 1s infinite;
	-moz-animation:load 2s linear 1s infinite;
	-ms-animation:load 2s linear 1s infinite;
	-o-animation:load 2s linear 1s infinite;
	animation:load 2s linear 1s infinite;
}
.fcc{background:url(http://hovertree.com/texiao/css3/9/images/fcc.png);position:absolute;z-index:3;right:230px;width:90px;height:97px;top:0}

@-webkit-keyframes load{
	0%{
		transform: rotate(0);
		-ms-transform: rotate(0);		/* IE 9 */
		-webkit-transform: rotate(0);	/* Safari and Chrome */
		-o-transform: rotate(0);		/* Opera */
		-moz-transform: rotate(0);		/* Firefox */
	}
	100%{
		transform: rotate(360deg);
		-ms-transform: rotate(360deg);		/* IE 9 */
		-webkit-transform: rotate(360deg);	/* Safari and Chrome */
		-o-transform: rotate(360deg);		/* Opera */
		-moz-transform: rotate(360deg);		/* Firefox */
	}
}

<!DOCTYPE html>
<html>
<head>
<!-- 效果：http://hovertree.com/texiao/css3/9/ -->
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>CSS3转动的大风车 - 何问起</title><base target="_blank" />
<link href="http://hovertree.com/texiao/css3/9/hovertreefc/hovertreedfc.css" rel="stylesheet" type="text/css" />
<style>a{color:blue;}</style>
</head>
<body>
<div class="loading">
<div class="pic"></div>
<div class="fcc"></div>
</div>
<div><a href="http://hovertree.com/h/bjaf/h9tb5itb.htm">原文</a> <a href="http://hovertree.com/">首页</a> <a href="http://hovertree.com/texiao/">特效</a></div>
</body>
</html>

css3旋转的大风车动画特效

猜你喜欢