div+css实现一个风车转动动画效果代码-html代码-BFW代码库

代码语言：html

所属分类：动画

代码描述：div+css实现一个风车转动动画效果代码

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
<style>
    @import url('https://fonts.googleapis.com/css?family=Poppins:400,500,600,700,800,900');
	body {
	width:100%;
	min-height:100vh;
	display:block;
	overflow-x:hidden;
	background:linear-gradient(#ffcc7a,#fcaf17);
	font-family:'Poppins',sans-serif
}
.switch-wrap {
	position:relative;
	font-size:17px;
	color:#212121;
	font-weight:600;
	letter-spacing:1px;
	text-align:center;
	margin:0 auto;
	margin-top:30px;
	-webkit-transition:all 500ms linear;
	transition:all 500ms linear
}
.switch-wrap span {
	font-size:14px;
	color:#000;
	font-weight:500;
	letter-spacing:0
}
#switch,#circle {
	height:31px;
	cursor:pointer;
	-webkit-transition:all .4s cubic-bezier(0.54,1.6,0.5,1);
	transition:all .4s cubic-bezier(0.54,1.6,0.5,1)
}
#switch {
	width:60px;
	margin:0 auto;
	border:2px solid #fec22a;
	border-radius:27px;
	background:#ff9400;
	position:relative;
	display:block;
	text-align:center;
	margin:0 auto;
	transform:translateY(10px)
}
#circle {
	margin-top:5%;
	margin-left:5%;
	width:40%;
	height:80%;
	border-radius:50%;
	box-shadow:0 4px 4px rgba(26,53,71,0.25),0 0 0 1px rgba(26,53,71,0.07);
	background:#e9e5d5
}
.switched {
	border-color:#777!important;
	background:#000!important
}
.switched #circle {
	margin-left:55%;
	background:#e9e5d5
}
.main-wrapper {
	position:relative;
	margin:0 auto;
	text-align:center;
	width:400px;
	height:400px;
	overflow:hidden;
	display:block;
	border:5px solid #7c3f00;
	border-radius:50%;
	z-index:5;
	margin-top:30px;
	margin-bottom:50px;
	background:linear-gradient(#fcaf17,#ffcc7a);
	box-shadow:0 0 16px 8px rgba(255,255,255,.3),inset -4px 2px 8px 0 rgba(124,63,0,.5)
}
.text-wrap {
	position:relative;
	font-size:36px;
	margin-top:20px;
	text-align:center;
	color:#f9f9f9;
	letter-spacing:2px;
	font-weight:400;
	font-family:'Dancing Script',cursive;
	text-shadow:0 2px 0 #666
}
.clouds-wrapper {
	position:absolute;
	left:0;
	top:20px;
	width:1200px;
	height:200px;
	display:block;
	transform:translateX(0);
	animation:moveClouds 4s linear infinite;
	z-index:20;
	-webkit-animation-play-state:running;
	-moz-animation-play-state:running;
	animation-play-state:running;
	-webkit-transition:all 300ms linear;
	transition:all 300ms linear
}
.clouds-wrap {
	position:absolute;
	left:0;
	top:0;
	width:1200px;
	height:200px;
	display:block;
	transform:translateX(0);
	animation:moveClouds 12s linear infinite;
	-webkit-animation-play-state:paused;
	-moz-animation-play-state:paused;
	animation-play-state:paused;
	-webkit-transition:all 300ms linear;
	transition:all 300ms linear
}
@keyframes moveClouds {
	0% {
	transform:translateX(0)
}
100% {
	transform:translateX(-33.333333333333%)
}
}body.slow-wind .clouds-wrapper {
	-webkit-animation-play-state:paused;
	-moz-animation-play-state:paused;
	animation-play-state:paused
}
body.slow-wind .clouds-wrap {
	-webkit-animation-play-state:running;
	-moz-animation-play-state:running;
	animation-play-state:running
}
.cloud {
	position:absolute;
	left:0;
	top:20px;
	width:400px;
	height:180px;
	display:block;
	z-index:2
}
.cloud.snd {
	left:400px
}
.cloud.trd {
	left:800px
}
.cloud span {
	position:absolute;
	left:51px;
	top:34px;
	display:block;
	z-index:2;
	width:40px;
	height:40px;
	border-radius:50%;
	border-width:2px;
	border-style:solid;
	border-color:#ffd898 transparent transparent #ffd898
}
.cloud span:nth-child(2) {
	left:81px;
	top:36px;
	width:20px;
	height:20px;
	border-color:#ffd898 transparent transparent transparent
}
.cloud span:nth-child(3) {
	left:95px;
	top:0;
	width:80px;
	height:80px;
	transform:rotate(-45deg);
	border-color:#ffd898 #ffd898 transparent transparent
}
.cloud span:nth-child(4) {
	left:158px;
	top:26px;
	width:100px;
	height:100px;
	border-color:#ffd898 transparent transparent transparent
}
.cloud span:nth-child(5) {
	left:237px;
	top:37px;
	width:30px;
	height:30px;
	border-color:#ffd898 #ffd898 transparent transparent
}
.cloud span:nth-child(6) {
	left:103px;
	top:8px;
	width:60px;
	height:60px;
	transform:rotate(-30deg);
	border-color:#ffd898 transparent transparent transparent
}
.cloud span:nth-child(7) {
	left:107px;
	top:12px;
	width:50px;
	height:50px;
	transform:rotate(-35deg);
	border-color:#ffd898 transparent transparent transparent
}
.cloud span:nth-child(8) {
	left:111px;
	top:16px;
	width:40px;
	height:40px;
	transform:rotate(-40deg);
	border-color:#ffd898 transparent transparent transparent
}
.cloud span:nth-child(9) {
	left:115px;
	top:20px;
	width:30px;
	height:30px;
	transform:rotate(-45deg);
	border-color:#ffd898 transparent transparent transparent
}
.cloud span:nth-child(10) {
	left:119px;
	top:24px;
	width:20px;
	height:20px;
	transform:rotate(-50deg);
	border-color:#ffd898 transparent transparent transparent
}
.cloud span:nth-child(11) {
	left:123px;
	top:28px;
	width:10px;
	height:10px;
	transform:rotate(-55deg);
	border-color:#ffd898 transparent transparent transparent
}
.cloud span:nth-child(12) {
	left:65px;
	top:10px;
	width:80px;
	height:80px;
	transform:rotate(20deg);
	border-color:transparent transparent #c97700 transparent
}
.cloud span:nth-child(13) {
	left:75px;
	top:25px;
	width:60px;
	height:60px;
	transform:rotate(15deg);
	border-color:transparent transparent #c97700 transparent
}
.cloud span:nth-child(14) {
	left:80px;
	top:32px;
	width:50px;
	height:50px;
	transform:rotate(10deg);
	border-color:transparent transparent #c97700 transparent
}
.cloud span:nth-child(15) {
	left:85px;
	top:39px;
	width:40px;
	height:40px;
	transform:rotate(5deg);
	border-color:transparent transparent #c97700 transparent
}
.cloud span:nth-child(16) {
	left:90px;
	top:46px;
	width:30px;
	height:30px;
	transform:rotate(0);
	border-color:transparent transparent #c97700 transparent
}
.cloud span:nth-child(17) {
	left:95px;
	top:53px;
	width:20px;
	height:20px;
	transform:rotate(-5deg);
	border-color:transparent transparent #c97700 transparent
}
.cloud span:nth-child(18) {
	left:100px;
	top:60px;
	width:10px;
	height:10px;
	transform:rotate(-10deg);
	border-color:transparent transparent #c97700 transparent
}
.cloud span:nth-child(19) {
	left:120px;
	top:-30px;
	width:140px;
	height:140px;
	transform:rotate(-15deg);
	border-color:transparent transparent #c97700 transparent;
	opacity:0
}
.cloud span:nth-child(20) {
	left:130px;
	top:-15px;
	width:120px;
	height:120px;
	transform:rotate(-5deg);
	border-color:transparent transparent #c97700 transparent;
	opacity:0
}
.cloud span:nth-child(21) {
	left:140px;
	top:0;
	width:100px;
	height:100px;
	transform:rotate(5deg);
	border-color:transparent transparent #c97700 transparent;
	opacity:0
}
.cloud span:nth-child(22) {
	left:150px;
	top:15px;
	width:80px;
	height:80px;
	transform:rotate(10deg);
	border-color:transparent transparent #c97700 transparent;
	opacity:0
}
.cloud span:nth-child(23) {
	left:160px;
	top:65px;
	width:60px;
	height:60px;
	transform:rotate(195deg);
	border-color:transparent transparent #c97700 transparent
}
.cloud span:nth-child(24) {
	left:172px;
	top:68px;
	width:40px;
	height:40px;
	transform:rotate(200deg);
	border-color:transparent transparent #c97700 transparent
}
.cloud span:nth-child(25) {
	left:177px;
	top:71px;
	width:30px;
	height:30px;
	transform:rotate(205deg);
	border-color:transparent transparent #c97700 transpar.........完整代码请登录后点击上方下载按钮下载查看