如何用css3实现简单旋转的风车

如何用css3实现简单旋转的风车
在DW中想要实现旋转的风车就要使用关键帧keyframes来设置旋转，其实也没什么难度的。先设置它的样式，然后要用定位把它放到合适的位置就可以了。
HTML的代码如下：

<div class="fengche"><div class="zhu"></div><div class="zhuan"><div class="z"></div><div class="xiaoyan"></div><div class="z1"></div><div class="z2"></div><div class="z3"></div><div class="z4"></div></div></div>

名字你们不要学我这样给啊，命名一定要标准，我这个是刚学的时候打的，只是懒得改了。
Css的代码如下：

.fengche{position: relative;
}
.zhuan{width: 300px;height: 300px;position: relative;clear: both;animation: zhuan 6s linear infinite;
}
@keyframes zhuan{0%{transform: rotate(0deg);}100%{transform: rotate(360deg);}
}
.z{width: 50px;height: 50px;margin: 0px;background: #B5B5B5;border-radius: 50%;position: absolute;top: 126px;left: 125px;
}
.xiaoyan{width: 20px;height: 20px;margin: 0px;background:#C8C8C8;border-radius: 50%;position: absolute;top: 140px;left: 140px;
}
.z1,.z3{width: 40px;height: 135px;background: #EBF453;border-radius: 50%;
}.z1{position: absolute;top: -35px;left: 110px;
}
.z3{position: absolute;bottom: -35px;left: 110px;
}
.z2,.z4{width: 135px;height: 40px;background: #EBF453;border-radius: 50%;
}
.z2{position: absolute;top: 115px;left: 160px;
}
.z4{position: absolute;top: 115px;right: 160px;
}
.zhu{width: 30px;height: 300px;background: #82BDD5;position: absolute;top: 81.5%;left: 135px;border-radius: 35% 35% 0 0;
}

代码就这么多，下面让我们看下实现的效果图：

不要问我为啥那么丑，我的技术还不够，你们要是有什么更好的方法一定要跟我说一下，大家一起进步嘛，毕竟，我也是初学者，所以欢迎大家来评论（づ￣3￣）づ╭❤～

如何用css3实现简单旋转的风车相关推荐

css3之制作旋转小风车
下面教大家做一个旋转小风车,所用知识与我上一篇的爱心特效有相似之处,大家可以看看我前面发的文章,好了,下面就展示我的代码吧 <!DOCTYPE html> <html> < ...
如何用css3制作一个旋转的立方体
css3增加的动画效果使得前端制作某些动画更加方便,流畅,如何制作一个最简单的会旋转的立方体呢?话不多说,直接上代码! html代码如下,需要一个大的div包裹六个div作为立方体的六个表面 < ...
Java风车动画代码_纯DOM+CSS3实现简单的小风车动画
html> 小风车-转啊转 html { font-size: 10px; } html * { -webkit-box-sizing: border-box; box-sizing: bord ...
如何用css3做一个旋转的魔方
代码: 效果图
CSS动画编辑软件,如何用css3在app制作出如丝般顺滑的动画
原标题:如何用css3在app制作出如丝般顺滑的动画在移动端上实现动画很简单. 在移动端上正确地实现动画也比较简单...如果你采纳我们的建议的话. 虽然现在每个人都会使用 CSS3 实现动画,但许多 ...
用html做12进制时钟特效,js+css3实现简单时钟特效
本文实例为大家分享了js+css3实现简单时钟的具体代码,供大家参考,具体内容如下 1.实现了时钟的特效,可以转动,时间准确,画面美观大气: 2.用到了css3的transform: rotate,t ...
html如何添加时钟效果,基于HTML5+CSS3实现简单的时钟效果
目的: 利用html5,css实现钟摆效果知识点: 1) 利用position/left/top和calc()实现元素的水平和垂直居中: 2) 利用CSS3的animation/transform/ ...
用html和css制作钟表,使用HTML5和CSS3制作简单的钟表
利用html5,css实现钟摆效果 ,在项目中经常会遇到,今天小编把基于HTML5+CSS3实现简单的时钟效果的实现代码分享到脚本之家平台,需要的额朋友参考下吧目的: 利用html5,css实现钟摆 ...
css3抽奖转盘html5,HTML5抽奖转盘-CSS3超简单版本
网上有很多关于抽奖转盘的代码和实例,有使用JavaScript控制动画的,有使用Canvas实现的,它们思路各不相同,本文将介绍一种采用CSS3的方式来实现转盘动画效果,非常简单,只需几行代码即可实现 ...

如何用css3实现简单旋转的风车

如何用css3实现简单旋转的风车相关推荐

最新文章

热门文章