这个特效包括两个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;
}
按照以上的思路就可以串联起整个风车内部的颜色,位置的绘制。