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 相关文章推荐
Web页面中八种创建多列等高(等高列布局)的实现技术
Dec 24 HTML / CSS
使用CSS3创建动态菜单效果
Jul 10 HTML / CSS
CSS3对背景图片的裁剪及尺寸和位置的设定方法
Mar 07 HTML / CSS
浅谈CSS3动画的回调处理
Jul 21 HTML / CSS
HTML5之SVG 2D入门11—用户交互性(动画)介绍及应用
Jan 30 HTML / CSS
html5实现canvas阴影效果示例
May 07 HTML / CSS
调用HTML5的Canvas API绘制图形的快速入门指南
Jun 17 HTML / CSS
详解HTML5中的拖放事件(Drag 和 drop)
Nov 14 HTML / CSS
浅谈HTML5 FileReader分布读取文件以及其方法简介
Nov 09 HTML / CSS
Canvas系列之滤镜效果
Feb 12 HTML / CSS
html5利用canvas实现颜色容差抠图功能
Dec 23 HTML / CSS
移动端HTML5开发神器之vconsole详解
Dec 15 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
Yii中CGridView实现批量删除的方法
2015/12/28 PHP
php批量删除操作(数据访问)
2017/05/23 PHP
PHP安装扩展mcrypt以及相关依赖项深入讲解
2021/03/04 PHP
prototype.js的Ajax对象
2006/09/23 Javascript
索趣科技的答案
2007/02/07 Javascript
ajax不执行success回调而是执行了error回调
2012/12/10 Javascript
简约JS日历控件 实例代码
2013/07/12 Javascript
NodeJS学习笔记之MongoDB模块
2015/01/13 NodeJs
javascript检测flash插件是否被禁用的方法
2016/01/14 Javascript
工作中比较实用的JavaScript验证和数据处理的干货(经典)
2016/08/03 Javascript
JS常用函数和常用技巧小结
2016/10/15 Javascript
使用html+js+css 实现页面轮播图效果(实例讲解)
2017/09/21 Javascript
React为 Vue 引入容器组件和展示组件的教程详解
2018/05/03 Javascript
Jquery的Ajax技术使用方法
2019/01/21 jQuery
js实现弹出框的拖拽效果实例代码详解
2019/04/16 Javascript
如何自动化部署项目?折腾服务器之旅~
2019/04/16 Javascript
微信小程序登陆注册功能的实现代码
2019/12/10 Javascript
Preload基础使用方法详解
2020/02/03 Javascript
JavaScript代码异常监控实现过程详解
2020/02/17 Javascript
vue props default Array或是Object的正确写法说明
2020/07/30 Javascript
[01:42]TI4西雅图DOTA2前线报道 第一顿早饭哦
2014/07/08 DOTA
自己编程中遇到的Python错误和解决方法汇总整理
2015/06/03 Python
Python基于Matplotlib库简单绘制折线图的方法示例
2017/08/14 Python
Python跨文件全局变量的实现方法示例
2017/12/10 Python
python matplotlib 在指定的两个点之间连线方法
2018/05/25 Python
详解在Python中以绝对路径或者相对路径导入文件的方法
2019/08/30 Python
对tensorflow中tf.nn.conv1d和layers.conv1d的区别详解
2020/02/11 Python
2020最新pycharm汉化安装(python工程狮亲测有效)
2020/04/26 Python
雅萌 (YA-MAN) :日本美容家电领域的龙头企业
2017/05/12 全球购物
MIXIT官网:俄罗斯最大的化妆品公司之一
2020/01/25 全球购物
兼职业务员岗位职责
2014/01/01 职场文书
领导干部廉政承诺书
2014/03/27 职场文书
班长竞选演讲稿
2014/04/24 职场文书
励志演讲稿200字
2014/08/21 职场文书
MySQL获取所有分类的前N条记录
2021/05/07 MySQL
python playwright之元素定位示例详解
2022/07/23 Python