CSS3 制作旋转的大风车(充满童年回忆)


Posted in HTML / CSS onJanuary 30, 2013

发一个很久以前的作品,当开始得知CSS3可以做动画时,就很想玩玩,于是就做了个充满童年回忆的大风车。


提示:您可以先修改部分代码再运行

HTML:
复制代码
代码如下:

<div class="windmill">
<div class="red"></div>
<div class="yellow"></div>
<div class="blue"></div>
<div class="green"></div>
<div class="dot"></div>
</div>

实现过程:首先来一个容器里面四个风扇、 一个中心点 结构很简单,使用绝对分别定好位。然后再使用border-radius把风扇矩形变成半圆,形状就有了,再分别给其上色,红黄蓝绿四种渐变颜色。最后给容器加个animation使整个容器开始旋转即可。
CSS:
复制代码
代码如下:

.windmill{
padding:10px; width:400px; height:400px; position:relative;
animation-name:moveWindmill;
animation-duration:4s;
animation-timing-function:linearanimation-delay:0;
animation-iteration-count:infinite;
animation-play-state:running;
/* 动画: */
-moz-animation-name:moveWindmill;
-moz-animation-duration:4s;
-moz-animation-timing-function:linear;
-moz-animation-delay:0;
-moz-animation-iteration-count:infinite;
-moz-animation-play-state:running;
-webkit-animation-name:moveWindmill;
-webkit-animation-duration:4s;
-webkit-animation-timing-function:linear;
-webkit-animation-delay:0;
-webkit-animation-iteration-count:infinite;
-webkit-animation-play-state:running;
-ms-animation-name:moveWindmill;
-ms-animation-duration:4s;
-ms-animation-timing-function:linear;
-ms-animation-delay:0;
-ms-animation-iteration-count:infinite;
-ms-animation-play-state:running;
}
.windmill div{ position:absolute; width:100px; height:50px;left:50%; top:50%; border-radius:0 0 50px 50px ; -moz-transform-origin:0% 0%;-webkit-transform-origin:0% 0%;-ms-transform-origin:0% 0%;}
.windmill .red{ background-color:red; background: -moz-radial-gradient(right, circle,red , #000);
background: -webkit-radial-gradient(right, circle,red , #000);
}
.windmill .yellow{transform:rotate(90deg); -ms-transform:rotate(90deg); -moz-transform:rotate(90deg); -webkit-transform:rotate(90deg); background-color:yellow; background: -moz-radial-gradient(right, circle,yellow , #000); background: -webkit-radial-gradient(right, circle,yellow , #000); background: -ms-radial-gradient(right, circle,yellow , #000);}
.windmill .blue{transform:rotate(180deg);-ms-transform:rotate(180deg); -moz-transform:rotate(180deg); -webkit-transform:rotate(180deg); background-color:blue; background: -moz-radial-gradient(right, circle,blue , #000); background: -webkit-radial-gradient(right, circle,blue , #000); }
.windmill .green{transform:rotate(270deg); -ms-transform:rotate(270deg);-moz-transform:rotate(270deg);-webkit-transform:rotate(270deg); background-color:green; background:radial-gradient(right, circle,green , #000);background: -moz-radial-gradient(right, circle,green , #000); background: -webkit-radial-gradient(right, circle,green , #000); background: -ms-radial-gradient(right, circle,green , #000); }.windmill .dot{ width:50px; height:50px; border-radius:50px ; position:absolute; left:50%;top:50%; margin-left:-25px; margin-top:-25px;background:#fff; background: -moz-radial-gradient(center, circle,#fff , #666); background: -webkit-radial-gradient(center, circle,#fff , #666);}
@keyframes moveWindmill /* Firefox */
{
% { -ms-transform: rotate(0deg)}
% { -ms-transform: rotate(90deg)}
% { -ms-transform: rotate(180deg)}
% { -ms-transform: rotate(270deg)}
% { -ms-transform: rotate(360deg)}
}
@-ms-keyframes moveWindmill /* ms*/
{
% { -ms-transform: rotate(0deg)}
% { -ms-transform: rotate(90deg)}
% { -ms-transform: rotate(180deg)}
% { -ms-transform: rotate(270deg)}
% { -ms-transform: rotate(360deg)}
}
@-webkit-keyframes moveWindmill /*webkit*/
{
% { -webkit-transform: rotate(0deg)}
% { -webkit-transform: rotate(90deg)}
% { -webkit-transform: rotate(180deg)}
% { -webkit-transform: rotate(270deg)}
% { -webkit-transform: rotate(360deg)} }
@-moz-keyframes moveWindmill /* Firefox */
{
% { -moz-transform: rotate(0deg)}
% { -moz-transform: rotate(90deg)}
% { -moz-transform: rotate(180deg)}
% { -moz-transform: rotate(270deg)}
% { -moz-transform: rotate(360deg)}
}
HTML / CSS 相关文章推荐
CSS3美化表单控件全集
Jun 29 HTML / CSS
纯CSS实现右侧底部悬浮效果(悬浮QQ、微信、微博、邮箱等联系方式)
Apr 24 HTML / CSS
CSS3中的opacity属性使用教程
Aug 19 HTML / CSS
CSS3 2D模拟实现摩天轮旋转效果
Nov 16 HTML / CSS
css3实现wifi信号逐渐增强效果实例
Aug 09 HTML / CSS
详解background属性的8个属性值(面试题)
Nov 02 HTML / CSS
使用CSS实现弹性视频html5案例实践
Dec 26 HTML / CSS
html5指南-4.使用Geolocation实现定位功能
Jan 07 HTML / CSS
LocalStorage记住用户和密码功能
Jul 24 HTML / CSS
关于h5中的fetch方法解读(小结)
Nov 15 HTML / CSS
data:image data url 文件转为Blob上传后端的方法
Jul 16 HTML / CSS
Html5新增了哪些功能
Apr 16 HTML / CSS
css3简单练习实现遨游浏览器logo的绘制
Jan 30 #HTML / CSS
IE滤镜与CSS3效果(详细整理分享)
Jan 25 #HTML / CSS
使用Filters滤镜弥补CSS3的跨浏览器问题以及兼容低版本IE
Jan 23 #HTML / CSS
纯css3无js实现的Android Logo(有简单动画)
Jan 21 #HTML / CSS
定义css设备类型-Media Queries图表简介及使用方法
Jan 21 #HTML / CSS
css3强大的动画效果animate使用说明及浏览器兼容介绍
Jan 09 #HTML / CSS
css3 box-sizing属性使用参考指南
Jan 08 #HTML / CSS
You might like
php实现修改新闻时删除图片的方法
2015/05/12 PHP
JavaScript在IE中“意外地调用了方法或属性访问”
2008/11/19 Javascript
javascript document.compatMode兼容性
2010/02/23 Javascript
javascript中创建对象的三种常用方法
2010/12/30 Javascript
基于jquery的bankInput银行卡账号格式化
2012/08/22 Javascript
js动态拼接正则表达式的两种方法
2014/03/04 Javascript
基于jQuery实现动态数字展示效果
2015/08/12 Javascript
Jquery on绑定的事件 触发多次实例代码
2016/12/08 Javascript
JS数组去重(4种方法)
2017/03/27 Javascript
jQuery实现百度登录框的动态切换效果
2017/04/21 jQuery
Angular指令之restict匹配模式的详解
2017/07/27 Javascript
简易Vue评论框架的实现(父组件的实现)
2018/01/08 Javascript
详解Vue中watch对象内属性的方法
2019/02/01 Javascript
高性能js数组去重(12种方法,史上最全)
2019/12/21 Javascript
js实现简单的点名器随机色实例代码
2020/09/20 Javascript
[02:19]2014DOTA2国际邀请赛 专访820少年们一起去追梦吧
2014/07/14 DOTA
[41:05]Serenity vs Pain 2018国际邀请赛小组赛BO2 第二场 8.19
2018/08/21 DOTA
[52:07]完美世界DOTA2联赛PWL S3 LBZS vs access 第二场 12.10
2020/12/13 DOTA
[04:40]DOTA2-DPC中国联赛1月26日Recap集锦
2021/03/11 DOTA
跟老齐学Python之for循环语句
2014/10/02 Python
Python脚本实现集群检测和管理功能
2015/03/06 Python
python获得文件创建时间和修改时间的方法
2015/06/30 Python
举例简单讲解Python中的数据存储模块shelve的用法
2016/03/03 Python
python+ffmpeg视频并发直播压力测试
2018/03/06 Python
selenium自动化测试入门实战
2020/12/21 Python
python中re模块知识点总结
2021/01/17 Python
css3中transition属性详解
2014/09/02 HTML / CSS
PHP如何设置和取得Cookie值
2015/06/30 面试题
乡镇党建工作汇报材料
2014/10/27 职场文书
实习指导教师评语
2014/12/30 职场文书
试用期工作表现自我评价
2015/03/06 职场文书
2015财务年度工作总结范文
2015/05/04 职场文书
公司费用报销管理制度
2015/08/04 职场文书
2016公务员年度考核评语
2015/12/01 职场文书
学习习近平主席讲话心得体会
2016/01/20 职场文书
SpringCloud的JPA连接PostgreSql的教程
2021/06/26 Java/Android