欢迎使用Markdown编辑器

CSS3动画样式不多，但是呢，它的每一个特性能实现的功能还是挺多的，有句话说的好，只有你想不到的，而没有你做不到的。好了，废话不多说，直接上代码。

html代码

在html代码中，使用4个div封装了一下风车的扇叶并将封装好的扇叶放入一个大的div（#leaf_box）中，最下面是风车的杆子，这里给了它外面的div（#box）相对定位，这样固定风车柄时就可以直接相对于它外面的盒子设置偏移量就行了

<div id="box"><div id="leaf_box"><div id="leaf1" class="leaf"></div><div id="leaf2" class="leaf"></div><div id="leaf3" class="leaf"></div><div id="leaf4" class="leaf"></div></div><div id="ganzi"></div>
</div>

css样式

首先对最外层的div（#box）设置一个宽高和margin ： auto固定在浏览器中间，我在这里设置了黑色的border，所以看起来还比较明显，然后需要给box这个div一个position的样式，因为下面的风车的杆子ganzi会用到定位，box就是ganzi的父元素。
接下来就是包裹我们风车扇叶的leaf_box这个div了，同样的也要设置宽高和position，因为它是下面所有扇叶leaf的父元素，最后设置了一个tranform（这是css3才有的）使风车转动起来，transition是过渡的意思，在这里实现了加速旋转的效果（注意：tranform一般不用先设置，一般先调整好下面的四个扇叶leaf和风车的杆子ganzi的位置布局后再设置，因为先设置的话，就会转起来了，就不方便做布局了）。
然后是扇叶，扇叶没什么难的，主要是需要做成半椭圆，这个调整border-radius的比例就可以做到，实现四个位置不同形状相同的扇叶，只需要使用tranform旋转一下角度就可以实现四个不同那个方位的扇叶了，当然这期间也需要调整top和left才能做到将四片扇叶聚焦到一个点上。
再者就是杆子ganzi的定位，杆子的定位很简单，针对父元素box进行定位，只要挪到扇叶的中点就好了。
最后就是让包裹4片扇叶的leaf_box旋转起来了，在hover和active这两个伪类中实现相应的动画，就可以实现鼠标移入和移出这两种状态的出现的不同动画效果。

#box{margin: 20px auto;width: 1100px;height: 700px;border: 1px solid black;position: relative;
}
#leaf_box{margin: 20px auto;width: 200px;height: 200px;/* border-radius: 50%; *//* border: 1px solid black; */position: relative;transform: rotate(0deg);transition-duration: 200s;
}
#leaf_box:hover{transform: rotate(72000deg);
}
#leaf_box:active{transform: rotate(40deg);transition-duration: 0s;
}
.leaf{display: inline-block;width:25px;height: 100px;background-color: red;border-radius: 0 50px 50px 0 / 0 100px 100px 0 ;
}#leaf1{position: absolute;top: 2px;left: 110px;transform: rotate(10deg);
}#leaf2{position: absolute;top: 69px;left: 135px;transform: rotate(99deg);
}#leaf3{position: absolute;top: 97px;left: 68px;transform: rotate(189deg);
}
#leaf4{position: absolute;top: 22px;left: 46px;transform: rotate(289deg);
}
#ganzi{width:5px;height: 200px;background:red;position: absolute;top: 119px;left: 549px;
}

效果图

鼠标移至风车上方时触发旋转效果（风速由慢到快），移出时触发停止操作（又快到慢减速停止）。

css3动画让风车转起来相关推荐

纯CSS3实现旋转风车
今天我们依然来做一个比较简单的CSS3动画-五彩风车随风旋转.这个动效和上一篇教程一样,仅使用CSS3完成.我们使用了一些常见的CSS3动画技巧,再加上传统CSS的三角形制作手法,就完成了风车随风旋转 ...
CSS3动画制作的旋转风车，大家五一节日快乐
✅作者简介: 大家好五一快乐,我是痴心阿文,你们的学友哥,今天给大家分享一个CSS3动画制作的旋转风车!
用html怎么制作风车,css3 animation实现风车转动
项目中经常有用到动画效果,比如Loading.风车转动等等.最简单的办法是使用gif,但是gif在半透明背景下有白边,体验不友好,好在现在可以使用css3的anmiation来实现动画效果,极大的提升 ...
CSS3 动画——animations
CSS3动画( CSS3 animations ) 我们学习了CSS3的transition 和transform属性,虽然二者结合可以实现一些简单的动画效果,但是也有一些难以克服的缺点,如无法实现 ...
css 右上角翻开动画_27个精致的CSS3动画效果源代码下载
CSS主要用于控制网页的外观,CSS代码可以随意变化网页的布局和网页的内容样式.当CSS3出现以后,更是可以让网页增添了不少动画元素,随着IE6,7的淘汰,手机端的崛起更是让它成熟了许多.CSS3动画 ...
html css3风车,css3 animation实现风车转动
项目中经常有用到动画效果,比如Loading.风车转动等等.最简单的办法是使用gif,但是gif在半透明背景下有白边,体验不友好,好在现在可以使用css3的anmiation来实现动画效果,极大的提升 ...
html 语言 gif 动画,动效篇（1）－－从简单CSS3动画片段代码，到生成gif动图～
简单css动画片段代码(最终效果 ) (一)请自行下载安装Dreamweaver 在Dreamweaver编写代码(如需参考请复制下列代码) (二)HTML CSS代码详解css代码(/*详解*/) ...
css怎么动画中该透明度,通过css3动画和opacity透明度实现呼吸灯效果
本文介绍了通过css3动画和opacity透明度实现呼吸灯效果的方法,分享给大家,具体如下: 呼吸灯 /*也可以通过加层罩,通过设置层罩透明度来实现亮度动画*/ body{ background-co ...
小猿圈自学web前端之CSS3动画练习案例：用CSS3做个钟表
前段时间发的五子棋的游戏很多小伙伴都私聊让再做个,今天小猿圈web前端讲师为大家分享的是CSS3动画练习案例:用CSS3做个钟表,想玩的小伙伴记得自己运行一下呦. 自学CSS3属性之后,我们来用一个小 ...

css3动画让风车转起来

欢迎使用Markdown编辑器

html代码

css样式

效果图

css3动画让风车转起来相关推荐

最新文章

热门文章