CSS3实现蓝色圆形风车旋转特效代码

版权：原创更新时间：1年以上

[该文章底部包含文件资源,可根据自己情况,决定是否下载资源使用,时间>金钱,如有需要,立即查看资源]

以下是 CSS3实现蓝色圆形风车旋转特效代码的示例演示效果:

当前平台(PC电脑)

平台:

整屏预览

部分效果截图:

HTML代码(index.html):

<!doctype html>
<html lang="zh">

<head>
<meta charset="utf-8">
<title>CSS3实现蓝色圆形风车旋转特效</title>
<link rel="stylesheet" href="css/recert.css">
</head>

<body>
<div class="main53d">
	<ul>
		<li><img src="images/main5-pic1.png"> </li>
		<li><img src="images/main5-pic2.png"> </li>
		<li><img src="images/main5-pic3.png"> </li>
	</ul>
</div>
</body>
</html>

CSS代码(recert.css):

.main53d{-webkit-transition:All 1s 0s;-moz-transition:All 1s 0s;-ms-transition:All 1s 0s;margin-top:200px;}
.main53d ul{margin:0;padding:0;/* -webkit-perspective:1600px;*/
/* -webkit-transform-style:preserve-3d;*/
/* position:relative;*/
-webkit-transform:translateX(0px) translateY(0px) translateZ(0px) rotateX(0deg) rotateY(0deg) rotateZ(0deg) scaleX(1) scaleY(1) scaleZ(1);-moz-transform:translateX(0px) translateY(0px) translateZ(0px) rotateX(0deg) rotateY(0deg) rotateZ(0deg) scaleX(1) scaleY(1) scaleZ(1);-ms-transform:translateX(0px) translateY(0px) translateZ(0px) rotateX(0deg) rotateY(0deg) rotateZ(0deg) scaleX(1) scaleY(1) scaleZ(1);}
.main53d ul li{list-style:none;position:absolute;width:530px;height:530px;left:45%;top:100%;margin-left:-200px;margin-top:-100px;}
.main53d li img{-webkit-transform-style:preserve-3d;-moz-transform-style:preserve-3d;-ms-transform-style:preserve-3d;transform-style:preserve-3d;}
.main53d ul li:nth-of-type(1){-webkit-transition:All 1.2s 0s;-moz-transition:All 1.2s 0s;-ms-transition:All 1.2s 0s;transition:All 1.2s 0s;-webkit-transform:translateX(0) translateY(0) translateZ(0px) rotateX(0deg) rotateY(0deg) rotateZ(0deg) scaleX(1) scaleY(1) scaleZ(1);-moz-transform:translateX(0) translateY(0) translateZ(0px) rotateX(0deg) rotateY(0deg) rotateZ(0deg) scaleX(1) scaleY(1) scaleZ(1);-ms-transform:translateX(0) translateY(0) translateZ(0px) rotateX(0deg) rotateY(0deg) rotateZ(0deg) scaleX(1) scaleY(1) scaleZ(1);transform:translateX(0) translateY(0) translateZ(0px) rotateX(0deg) rotateY(0deg) rotateZ(0deg) scaleX(1) scaleY(1) scaleZ(1);}
.main53d ul li:nth-of-type(1) img{-webkit-animation:z 5s linear 0s infinite;-moz-animation:z 5s linear 0s infinite;-ms-animation:z 5s linear 0s infinite;animation:z 5s linear 0s infinite;}
.main53d ul li:nth-of-type(2){-webkit-animation:y 20s linear 0s infinite;-moz-animation:y 20s linear 0s infinite;-ms-animation:y 20s linear 0s infinite;animation:y 20s linear 0s infinite;}
.main53d ul li:nth-of-type(3){-webkit-animation:z 10s linear 0s infinite;-moz-animation:z 10s linear 0s infinite;-ms-animation:z 10s linear 0s infinite;animation:z 10s linear 0s infinite;}
@-webkit-keyframes z{from{-webkit-transform:translateX(0) translateY(0) translateZ(0) rotateX(0deg) rotateY(0deg) rotateZ(0deg) scaleX(1) scaleY(1) scaleZ(1);-moz-transform:translateX(0) translateY(0) translateZ(0) rotateX(0deg) rotateY(0deg) rotateZ(0deg) scaleX(1) scaleY(1) scaleZ(1);-ms-transform:translateX(0) translateY(0) translateZ(0) rotateX(0deg) rotateY(0deg) rotateZ(0deg) scaleX(1) scaleY(1) scaleZ(1);transform:translateX(0) translateY(0) translateZ(0) rotateX(0deg) rotateY(0deg) rotateZ(0deg) scaleX(1) scaleY(1) scaleZ(1);}
to{-webkit-transform:translateX(0) translateY(0) translateZ(0) rotateX(0deg) rotateY(0deg) rotateZ(360deg) scaleX(1) scaleY(1) scaleZ(1);-moz-transform:translateX(0) translateY(0) translateZ(0) rotateX(0deg) rotateY(0deg) rotateZ(360deg) scaleX(1) scaleY(1) scaleZ(1);-ms-transform:translateX(0) translateY(0) translateZ(0) rotateX(0deg) rotateY(0deg) rotateZ(360deg) scaleX(1) scaleY(1) scaleZ(1);transform:translateX(0) translateY(0) translateZ(0) rotateX(0deg) rotateY(0deg) rotateZ(360deg) scaleX(1) scaleY(1) scaleZ(1);}
}
@-webkit-keyframes y{from{-webkit-transform:translateX(0) translateY(0) translateZ(0) rotateX(0deg) rotateY(0deg) rotateZ(0deg) scaleX(1) scaleY(1) scaleZ(1);-moz-transform:translateX(0) translateY(0) translateZ(0) rotateX(0deg) rotateY(0deg) rotateZ(0deg) scaleX(1) scaleY(1) scaleZ(1);-ms-transform:translateX(0) translateY(0) translateZ(0) rotateX(0deg) rotateY(0deg) rotateZ(0deg) scaleX(1) scaleY(1) scaleZ(1);transform:translateX(0) translateY(0) translateZ(0) rotateX(0deg) rotateY(0deg) rotateZ(0deg) scaleX(1) scaleY(1) scaleZ(1);}
to{-webkit-transform:translateX(0) translateY(0) translateZ(0) rotateX(0deg) rotateY(0deg) rotateZ(-360deg) scaleX(1) scaleY(1) scaleZ(1);-moz-transform:translateX(0) translateY(0) translateZ(0) rotateX(0deg) rotateY(0deg) rotateZ(-360deg) scaleX(1) scaleY(1) scaleZ(1);-ms-transform:translateX(0) translateY(0) translateZ(0) rotateX(0deg) rotateY(0deg) rotateZ(-360deg) scaleX(1) scaleY(1) scaleZ(1);transform:translateX(0) translateY(0) translateZ(0) rotateX(0deg) rotateY(0deg) rotateZ(-360deg) scaleX(1) scaleY(1) scaleZ(1);}
}

附件:下载该文件资源,减少时间成本(增值服务)