大家好，关于风车动漫官网(P)很多朋友都还不太明白，今天小编就来为大家分享关于剖析一个html5实例的知识，希望对各位有所帮助！
这个特效包括两个html,一个命名为index.html,一个命名为index2.html
<title>纯CSS3超逼真的风车旋转动画DEMO演示</title>
<divstyle="text-align:center;clear:both">
<scriptsrc="/gg_bd_ad_720x90.js"type="text/javascript"></script>
<scriptsrc="/follow.js"type="text/javascript"></script>
<iframeframeborder="0"scrolling="no"src="index2.html"width="100%"height="500px"></iframe>
代码讲解：<body>里面包含两个js文件负责交互。嵌入一个frame，指向index2.html，那么顺着这个方向我们先看看index2.html，看看代码的思路。
<title>纯CSS3超逼真的风车旋转动画DEMO演示</title>
<linkrel="stylesheet"href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css">
<linkrel="stylesheet"href="css/style.css">
<divclass="pillar"></div>
<divclass="dome-window"></div>
<divclass="windmill-window"></div>
<divclass="bladeblade-1"></div>
<divclass="bladeblade-2"></div>
<divclass="bladeblade-3"></div>
<divclass="bladeblade-4"></div>
<divclass="grill"></div>
<divclass="hookhook-1"></div>
<divclass="hookhook-2"></div>
<divclass="hookhook-3"></div>
<divclass="hookhook-4"></div>
<divclass="sun"></div>
<divclass="land"></div>
<divclass="grassgrass-1"></div>
<divclass="grassgrass-2"></div>
从上面的代码可以看出整个风车是怎样画出来的。每一个div里面都是风车的组成部分。
接下来我们选择看一下css，是如何绘制的，这里看window的绘制
-webkit-transform-origin:50%50%;
-webkit-transform:translate(-50%,-50%)scale(1);
transform:translate(-50%,-50%)scale(1);
background:radial-gradient(farthest-sideat135px340px,var(--sky-color-2)135px,transparent135px),radial-gradient(farthest-sideat405px300px,var(--sky-color-1)140px,transparent135px),linear-gradient(tobottom,var(--sky-color-1)320px,var(--sky-color-2)320px);
-webkit-animation:window-movevar(--window-move-time)ease-in-outinfinitealternate;
animation:window-movevar(--window-move-time)ease-in-outinfinitealternate;
?按照以上的思路就可以串联起整个风车内部的颜色，位置的绘制。
OK，本文到此结束，希望对大家有所帮助。
