css风车绕中心旋转_剖析一个html5实例——风车

这个特效包括两个html, 一个命名为index.html,一个命名为index2.html

index.html 源代码如下：

纯CSS3超逼真的风车旋转动画DEMO演示

代码讲解：里面包含两个js文件负责交互。 嵌入一个frame ，指向index2.html，那么顺着这个方向我们先看看index2.html，看看代码的思路。

纯CSS3超逼真的风车旋转动画DEMO演示

从上面的代码可以看出整个风车是怎样画出来的。每一个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;

}

​按照以上的思路就可以串联起整个风车内部的颜色，位置的绘制。