这个特效包括两个html, 一个命名为index.html,一个命名为index2.html
index.html 源代码如下：
<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="UTF-8">
<title>纯CSS3超逼真的风车旋转动画DEMO演示</title>
</head>
<body>
<div style="text-align:center;clear:both">
<script src="/gg_bd_ad_720x90.js" type="text/javascript"></script>
<script src="/follow.js" type="text/javascript"></script>
</div>
<iframe frameborder="0" scrolling="no" src="index2.html" width="100%" height="500px"></iframe>
</body>
</html>
代码讲解：<body>里面包含两个js文件负责交互。 嵌入一个frame ，指向index2.html，那么顺着这个方向我们先看看index2.html，看看代码的思路。
<head>
<meta charset="UTF-8">
<title>纯CSS3超逼真的风车旋转动画DEMO演示</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css">
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<div class="window">
<div class="windmill">
<div class="pillar"></div>
<div class="dome">
<div class="dome-window"></div>
</div>
<div class="windmill-window"></div>
<div class="blades">
<div class="blade blade-1"></div>
<div class="blade blade-2"></div>
<div class="blade blade-3"></div>
<div class="blade blade-4"></div>
</div>
<div class="ramp">
<div class="grill"></div>
<div class="hook hook-1"></div>
<div class="hook hook-2"></div>
<div class="hook hook-3"></div>
<div class="hook hook-4"></div>
</div>
</div>
<div class="sun"></div>
<div class="land"></div>
<div class="grass grass-1"></div>
<div class="grass grass-2"></div>
</div>
从上面的代码可以看出整个风车是怎样画出来的。每一个div 里面都是风车的组成部分。
接下来我们选择看一下css，是如何绘制的，这里看window的绘制
.window {
width: 540px;
height: 540px;
left: 50%;
top: 50%;
-webkit-transform-origin: 50% 50%;
transform-origin: 50% 50%;
-webkit-transform: translate(-50%, -50%) scale(1);
transform: translate(-50%, -50%) scale(1);
border-radius: 50%;
background: radial-gradient(farthest-side at 135px 340px, var(--sky-color-2) 135px, transparent 135px), radial-gradient(farthest-side at 405px 300px, var(--sky-color-1) 140px, transparent 135px), linear-gradient(to bottom, var(--sky-color-1) 320px, var(--sky-color-2) 320px);
-webkit-animation: window-move var(--window-move-time) ease-in-out infinite alternate;
animation: window-move var(--window-move-time) ease-in-out infinite alternate;
}
?按照以上的思路就可以串联起整个风车内部的颜色，位置的绘制。