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 transparent
}
.cloud span:nth-child(26) {
	left:182px;
	top:74px;
	width:20px;
	height:20px;
	transform:rotate(210deg);
	border-color:transparent transparent #c97700 transparent
}
.cloud span:nth-child(27) {
	left:187px;
	top:77px;
	width:10px;
	height:10px;
	transform:rotate(215deg);
	border-color:transparent transparent #c97700 transparent
}
.cloud span:nth-child(28) {
	left:185px;
	top:90px;
	width:10px;
	height:10px;
	transform:rotate(220deg);
	border-color:transparent transparent #c97700 transparent;
	opacity:0
}
.cloud span:nth-child(29) {
	left:112px;
	top:27px;
	width:50px;
	height:50px;
	transform:rotate(65deg);
	border-color:transparent #ffd898 transparent transparent
}
.cloud span:nth-child(31) {
	left:116px;
	top:33px;
	width:40px;
	height:40px;
	transform:rotate(70deg);
	border-color:transparent #ffd898 transparent transparent
}
.cloud span:nth-child(32) {
	left:120px;
	top:39px;
	width:30px;
	height:30px;
	transform:rotate(75deg);
	border-color:transparent #ffd898 transparent transparent
}
.cloud span:nth-child(33) {
	left:124px;
	top:45px;
	width:20px;
	height:20px;
	transform:rotate(80deg);
	border-color:transparent #ffd898 transparent transparent
}
.cloud span:nth-child(34) {
	left:128px;
	top:51px;
	width:10px;
	height:10px;
	transform:rotate(85deg);
	border-color:transparent #ffd898 transparent transparent
}
.cloud span:nth-child(35) {
	left:182px;
	top:32px;
	width:50px;
	height:50px;
	transform:rotate(35deg);
	border-color:#ffd898 transparent transparent transparent
}
.cloud span:nth-child(36) {
	left:186px;
	top:36px;
	width:40px;
	height:40px;
	transform:rotate(30deg);
	border-color:#ffd898 transparent transparent transparent
}
.cloud span:nth-child(37) {
	left:190px;
	top:40px;
	width:30px;
	height:30px;
	transform:rotate(25deg);
	border-color:#ffd898 transparent transparent transparent
}
.cloud span:nth-child(38) {
	left:194px;
	top:44px;
	width:20px;
	height:20px;
	transform:rotate(20deg);
	border-color:#ffd898 transparent transparent transparent
}
.cloud span:nth-child(39) {
	left:198px;
	top:48px;
	width:10px;
	height:10px;
	transform:rotate(15deg);
	border-color:#ffd898 transparent transparent transparent
}
.cloud span:nth-child(40) {
	left:207px;
	top:30px;
	width:45px;
	height:45px;
	transform:rotate(-45deg);
	border-color:transparent transparent #c97700 transparent
}
.cloud span:nth-child(41) {
	left:209px;
	top:79px;
	width:15px;
	height:15px;
	transform:rotate(205deg);
	border-color:transparent transparent #c97700 #c97700
}
.hill-front {
	position:absolute;
	margin:0 auto;
	left:-400px;
	bottom:-1100px;
	text-align:center;
	width:1200px;
	height:1200px;
	display:block;
	overflow:hidden;
	border-radius:50%;
	z-index:50;
	background-color:#7c3f00
}
.hill-front-over {
	position:absolute;
	margin:0 auto;
	left:-16px;
	bottom:-3px;
	text-align:center;
	width:1200px;
	height:1200px;
	display:block;
	overflow:hidden;
	border-radius:50%;
	z-index:50;
	background-color:#fcaf17;
	border:3px solid #7c3f00;
	box-shadow:inset -10px 2px 4px 0 rgba(124,63,0,1)
}
.hill-front-over span {
	position:absolute;
	left:273px;
	top:-23px;
	transform:rotate(25.5deg);
	text-align:center;
	width:1200px;
	height:1200px;
	display:block;
	overflow:hidden;
	border-radius:50%;
	border:2px solid #7c3f00;
	border-color:rgba(124,63,0,0.9) transparent transparent transparent;
	background-color:transparent;
	z-index:1
}
.hill-front-over span:nth-child(2) {
	left:288px;
	top:-20px
}
.hill-front-over span:nth-child(3) {
	left:303px;
	top:-17px
}
.hill-front-over span:nth-child(4) {
	left:318px;
	top:-14px
}
.hill-front-over span:nth-child(5) {
	left:333px;
	top:-11px
}
.hill-front-over span:nth-child(6) {
	left:348px;
	top:-8px
}
.hill-front-shadow {
	position:absolute;
	left:555px;
	top:15px;
	width:10px;
	height:60px;
	display:block;
	border-radius:100%;
	z-index:51;
	background-color:#ffd898;
	box-shadow:0 0 80px 40px #ffd898;
	transform:rotate(30deg);
	opacity:.6
}
.hill-back-left {
	position:absolute;
	margin:0 auto;
	left:-600px;
	bottom:-1070px;
	width:1200px;
	height:1200px;
	display:block;
	overflow:hidden;
	border-radius:50%;
	z-index:45;
	background-color:#7c3f00
}
.hill-back-left-over {
	position:absolute;
	margin:0 auto;
	left:-16px;
	bottom:5px;
	width:1200px;
	height:1200px;
	display:block;
	overflow:hidden;
	border-radius:50%;
	z-index:1;
	background-color:#fcaf17;
	border:3px solid #7c3f00;
	box-shadow:inset -12px 2px 4px 0 rgba(124,63,0,1)
}
.hill-back-left-over span {
	position:absolute;
	margin:0 auto;
	left:0;
	top:10px;
	width:1170px;
	height:1170px;
	display:block;
	overflow:hidden;
	border-radius:50%;
	z-index:1;
	background-color:#7c3f00
}
.hill-back-left-over span:nth-child(2) {
	left:-33px;
	top:5px;
	z-index:2;
	background-color:#fcaf17
}
.hill-back-left-over span:nth-child(3) {
	left:-33px;
	top:12px;
	z-index:3
}
.hill-back-left-over span:nth-child(4) {
	left:-66px;
	top:6px;
	z-index:4;
	background-color:#fcaf17
}
.hill-back-left-over span:nth-child(5) {
	left:-66px;
	top:13px;
	z-index:5
}
.hill-back-left-over span:nth-child(6) {
	left:-99px;
	top:6px;
	z-index:6;
	background-color:#fcaf17
}
.hill-back-left-over span:nth-child(7) {
	left:-99px;
	top:14px;
	z-index:7
}
.hill-back-left-over span:nth-child(8) {
	left:-132px;
	top:5px;
	z-index:8;
	background-color:#fcaf17
}
.hill-back-left-over span:nth-child(9) {
	left:-132px;
	top:15px;
	z-index:9
}
.hill-back-right {
	position:absolute;
	margin:0 auto;
	left:-200px;
	bottom:-1070px;
	width:1200px;
	height:1200px;
	display:block;
	overflow:hidden;
	border-radius:50%;
	z-index:45;
	background-color:#7c3f00
}
.hill-back-right-over {
	position:absolute;
	margin:0 auto;
	left:-11px;
	bottom:-2px;
	width:1200px;
	height:1200px;
	display:block;
	overflow:hidden;
	border-radius:50%;
	z-index:1;
	background-color:#fcaf17;
	border:3px solid #7c3f00;
	box-shadow:inset -42px 12px 34px 0 rgba(124,63,0,1)
}
.windmill {
	position:absolute;
	left:50%;
	bottom:82px;
	display:block;
	z-index:55;
	perspective:400px
}
.windmill-front {
	position:absolute;
	margin:0 auto;
	left:-35px;
	bottom:0;
	width:70px;
	height:360px;
	display:block;
	overflow:hidden;
	border:3px solid #7c3f00;
	z-index:1;
	background-color:#cf923e;
	transform:rotateX(55deg);
	transform-origin:center bottom;
	box-shadow:inset 7px 0 45px -7px #7c3f00
}
.windmill-front .shadow-lines {
	position:absolute;
	left:-20%;
	bottom:3%;
	width:110%;
	height:3px;
	display:block;
	overflow:hidden;
	border-radius:200%;
	z-index:1;
	background:linear-gradient(90deg,rgba(124,63,0,1),rgba(124,63,0,0.2))
}
.windmill-front .shadow-lines:nth-child(2) {
	bottom:6%
}
.windmill-front .shadow-lines:nth-child(3) {
	bottom:9%
}
.windmill-front .shadow-lines:nth-child(4) {
	bottom:12%
}
.windmill-front .shadow-lines:nth-child(5) {
	bottom:15%
}
.windmill-front .shadow-lines:nth-child(6) {
	bottom:18%
}
.windmill-front .shadow-lines:nth-child(7) {
	bottom:21%
}
.windmill-front .shadow-lines:nth-child(8) {
	bottom:24%
}
.windmill-front .shadow-lines:nth-child(9) {
	bottom:27%
}
.windmill-front .shadow-lines:nth-child(10) {
	bottom:30%
}
.windmill-front .shadow-lines:nth-child(11) {
	bottom:33%
}
.windmill-front .shadow-lines:nth-child(12) {
	bottom:36%
}
.windmill-front .shadow-lines:nth-child(13) {
	bottom:39%
}
.windmill-front .shadow-lines:nth-child(14) {
	bottom:42%
}
.windmill-front .shadow-lines:nth-child(15) {
	bottom:45%
}
.windmill-front .shadow-lines:nth-child(16) {
	bottom:48%
}
.windmill-front .shadow-lines:nth-child(17) {
	bottom:51%
}
.windmill-front .shadow-lines:nth-child(18) {
	bottom:54%
}
.windmill-front .shadow-lines:nth-child(19) {
	bottom:57%
}
.windmill-front .shadow-lines:nth-child(20) {
	bottom:60%
}
.windmill-front .shadow-lines:nth-child(21) {
	bottom:63%
}
.windmill-front .shadow-lines:nth-child(22) {
	bottom:66%
}
.windmill-front .shadow-lines:nth-child(23) {
	bottom:69%
}
.windmill-front .shadow-lines:nth-child(24) {
	bottom:72%
}
.windmill-front .shadow-lines:nth-child(25) {
	bottom:75%
}
.windmill-front .shadow-lines:nth-child(26) {
	bottom:78%
}
.windmill-front .shadow-lines:nth-child(27) {
	bottom:81%
}
.windmill-front .shadow-lines:nth-child(28) {
	bottom:84%
}
.windmill-front .shadow-lines:nth-child(29) {
	bottom:87%
}
.windmill-front .shadow-lines:nth-child(30) {
	bottom:90%
}
.windmill-front .shadow-lines:nth-child(31) {
	bottom:93%
}
.windmill-front .shadow-lines:nth-child(32) {
	bottom:96%
}
.door {
	position:absolute;
	margin-left:-18px;
	left:50%;
	bottom:-2px;
	width:36px;
	height:75px;
	display:block;
	overflow:hidden;
	border:3px solid #7c3f00;
	background-color:#e3ac00;
	border-top-left-radius:32px;
	border-top-right-radius:32px;
	z-index:2
}
.door span {
	position:absolute;
	left:calc(33.333% - 1px);
	bottom:0;
	width:2px;
	height:100%;
	display:block;
	overflow:hidden;
	background-color:#7c3f00
}
.door span:nth-child(2) {
	left:calc(66% - 2px)
}
.door span:nth-child(3) {
	left:2px;
	border-radius:50%;
	width:5px;
	height:5px;
	background-color:#444;
	top:50%
}
.window {
	position:absolute;
	margin-left:-15px;
	left:50%;
	top:120px;
	width:30px;
	height:80px;
	display:block;
	overflow:hidden;
	border:4px solid #7c3f00;
	background-color:#ffcc7a;
	z-index:2
}
.window span {
	position:absolute;
	left:0;
	top:50%;
	margin-top:-3px;
	width:30px;
	height:6px;
	display:block;
	z-index:1;
	background-color:#7c3f00
}
.window span:nth-child(2) {
	left:50%;
	top:0;
	margin-top:0;
	margin-left:-2px;
	width:4px;
	height:80px
}
.windmill-left {
	position:absolute;
	margin:0 auto;
	left:-64px;
	bottom:0;
	width:30px;
	height:360px;
	display:block;
	overflow:hidden;
	border:3px solid #7c3f00;
	z-index:1;
	background-color:#cf923e;
	transform:skewY(13deg) rotateX(55deg);
	transform-origin:bottom right;
	box-shadow:inset 7px 0 15px -7px #7c3f00
}
.windmill-left .shadow-lines {
	position:absolute;
	left:-20%;
	bottom:3%;
	width:110%;
	height:3px;
	display:block;
	overflow:hidden;
	border-radius:200%;
	z-index:1;
	background:linear-gradient(90deg,rgba(124,63,0,1),rgba(124,63,0,0.2))
}
.windmill-left .shadow-lines:nth-child(2) {
	bottom:6%
}
.windmill-left .shadow-lines:nth-child(3) {
	bottom:9%
}
.windmill-left .shadow-lines:nth-child(4) {
	bottom:12%
}
.windmill-left .shadow-lines:nth-child(5) {
	bottom:15%
}
.windmill-left .shadow-lines:nth-child(6) {
	bottom:18%
}
.windmill-left .shadow-lines:nth-child(7) {
	bottom:21%
}
.windmill-left .shadow-lines:nth-child(8) {
	bottom:24%
}
.windmill-left .shadow-lines:nth-child(9) {
	bottom:27%
}
.windmill-left .shadow-lines:nth-child(10) {
	bottom:30%
}
.windmill-left .shadow-lines:nth-child(11) {
	bottom:33%
}
.windmill-left .shadow-lines:nth-child(12) {
	bottom:36%
}
.windmill-left .shadow-lines:nth-child(13) {
	bottom:39%
}
.windmill-left .shadow-lines:nth-child(14) {
	bottom:42%
}
.windmill-left .shadow-lines:nth-child(15) {
	bottom:45%
}
.windmill-left .shadow-lines:nth-child(16) {
	bottom:48%
}
.windmill-left .shadow-lines:nth-child(17) {
	bottom:51%
}
.windmill-left .shadow-lines:nth-child(18) {
	bottom:54%
}
.windmill-left .shadow-lines:nth-child(19) {
	bottom:57%
}
.windmill-left .shadow-lines:nth-child(20) {
	bottom:60%
}
.windmill-left .shadow-lines:nth-child(21) {
	bottom:63%
}
.windmill-left .shadow-lines:nth-child(22) {
	bottom:66%
}
.windmill-left .shadow-lines:nth-child(23) {
	bottom:69%
}
.windmill-left .shadow-lines:nth-child(24) {
	bottom:72%
}
.windmill-left .shadow-lines:nth-child(25) {
	bottom:75%
}
.windmill-left .shadow-lines:nth-child(26) {
	bottom:78%
}
.windmill-left .shadow-lines:nth-child(27) {
	bottom:81%
}
.windmill-left .shadow-lines:nth-child(28) {
	bottom:84%
}
.windmill-left .shadow-lines:nth-child(29) {
	bottom:87%
}
.windmill-left .shadow-lines:nth-child(30) {
	bottom:90%
}
.windmill-left .shadow-lines:nth-child(31) {
	bottom:93%
}
.windmill-left .shadow-lines:nth-child(32) {
	bottom:96%
}
.windmill-right {
	position:absolute;
	margin:0 auto;
	left:34px;
	bottom:0;
	width:30px;
	height:360px;
	display:block;
	overflow:hidden;
	border:3px solid #7c3f00;
	z-index:1;
	background-color:#cf923e;
	transform:skewY(-13deg) rotateX(55deg);
	transform-origin:bottom left;
	box-shadow:inset 7px 0 45px -7px #7c3f00
}
.windmill-right .shadow-lines {
	position:absolute;
	left:-20%;
	bottom:3%;
	width:110%;
	height:3px;
	display:block;
	overflow:hidden;
	border-radius:200%;
	z-index:1;
	background:linear-gradient(90deg,rgba(124,63,0,1),rgba(124,63,0,0.2))
}
.windmill-right .shadow-lines:nth-child(2) {
	bottom:6%
}
.windmill-right .shadow-lines:nth-child(3) {
	bottom:9%
}
.windmill-right .shadow-lines:nth-child(4) {
	bottom:12%
}
.windmill-right .shadow-lines:nth-child(5) {
	bottom:15%
}
.windmill-right .shadow-lines:nth-child(6) {
	bottom:18%
}
.windmill-right .shadow-lines:nth-child(7) {
	bottom:21%
}
.windmill-right .shadow-lines:nth-child(8) {
	bottom:24%
}
.windmill-right .shadow-lines:nth-child(9) {
	bottom:27%
}
.windmill-right .shadow-lines:nth-child(10) {
	bottom:30%
}
.windmill-right .shadow-lines:nth-child(11) {
	bottom:33%
}
.windmill-right .shadow-lines:nth-child(12) {
	bottom:36%
}
.windmill-right .shadow-lines:nth-child(13) {
	bottom:39%
}
.windmill-right .shadow-lines:nth-child(14) {
	bottom:42%
}
.windmill-right .shadow-lines:nth-child(15) {
	bottom:45%
}
.windmill-right .shadow-lines:nth-child(16) {
	bottom:48%
}
.windmill-right .shadow-lines:nth-child(17) {
	bottom:51%
}
.windmill-right .shadow-lines:nth-child(18) {
	bottom:54%
}
.windmill-right .shadow-lines:nth-child(19) {
	bottom:57%
}
.windmill-right .shadow-lines:nth-child(20) {
	bottom:60%
}
.windmill-right .shadow-lines:nth-child(21) {
	bottom:63%
}
.windmill-right .shadow-lines:nth-child(22) {
	bottom:66%
}
.windmill-right .shadow-lines:nth-child(23) {
	bottom:69%
}
.windmill-right .shadow-lines:nth-child(24) {
	bottom:72%
}
.windmill-right .shadow-lines:nth-child(25) {
	bottom:75%
}
.windmill-right .shadow-lines:nth-child(26) {
	bottom:78%
}
.windmill-right .shadow-lines:nth-child(27) {
	bottom:81%
}
.windmill-right .shadow-lines:nth-child(28) {
	bottom:84%
}
.windmill-right .shadow-lines:nth-child(29) {
	bottom:87%
}
.windmill-right .shadow-lines:nth-child(30) {
	bottom:90%
}
.windmill-right .shadow-lines:nth-child(31) {
	bottom:93%
}
.windmill-right .shadow-lines:nth-child(32) {
	bottom:96%
}
.windmill-roof {
	position:absolute;
	top:-174px;
	left:0;
	display:block;
	z-index:5
}
.windmill-roof:after {
	position:absolute;
	top:0;
	left:-55px;
	display:block;
	content:'';
	border-bottom:55px solid #d25846;
	border-left:55px solid transparent;
	border-right:55px solid transparent;
	z-index:5;
	border-radius:50%
}
.windmill-roof:before {
	position:absolute;
	top:-5px;
	left:-63px;
	display:block;
	content:'';
	border-bottom:63px solid #7c3f00;
	border-left:63px so.........完整代码请登录后点击上方下载按钮下载查看