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实现类似翻书效果的过渡动画的示例代码
Sep 06 HTML / CSS
CSS3中currentColor关键字的妙用
Feb 27 HTML / CSS
html+css3实现的登录界面
Dec 09 HTML / CSS
用HTML5 Canvas API中的clearRect()方法实现橡皮擦功能
Mar 15 HTML / CSS
html5 桌面提醒:Notifycations应用介绍
Nov 27 HTML / CSS
深入剖析HTML5 内联框架iFrame
May 04 HTML / CSS
html5 初试 indexedDB(推荐)
Jul 21 HTML / CSS
详解html5 postMessage解决跨域通信的问题
Aug 17 HTML / CSS
浅析canvas元素的html尺寸和css尺寸对元素视觉的影响
Jul 22 HTML / CSS
CSS3 制作的书本翻页特效
Apr 13 HTML / CSS
关于html选择框创建占位符的问题
Jun 09 HTML / CSS
如何利用 CSS Overview 面板重构优化你的网站
Oct 24 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
玩家交还《星际争霸》原始码光盘 暴雪报以厚礼
2017/05/05 星际争霸
推荐25款php中非常有用的类库
2014/09/29 PHP
深入了解PHP中的Array数组和foreach
2016/11/06 PHP
php单元测试phpunit入门实例教程
2017/11/17 PHP
laravel框架数据库操作、查询构建器、Eloquent ORM操作实例分析
2019/12/20 PHP
TFDN图片播放器 不错自动播放
2006/10/03 Javascript
用javascript实现页面打印的三种方法
2007/03/05 Javascript
Prototype源码浅析 Number部分
2012/01/16 Javascript
鼠标移到导航当前位置的LI变色处于选中状态
2013/08/23 Javascript
用javascript添加控件自定义属性解析
2013/11/25 Javascript
jQuery实现拖拽效果插件的方法
2015/03/23 Javascript
setTimeout内不支持jquery的选择器的解决方案
2015/04/28 Javascript
JQuery中节点遍历方法实例
2015/05/18 Javascript
JS onkeypress兼容性写法详解
2016/04/27 Javascript
EasyUI加载完Html内容样式渲染完成后显示
2016/07/25 Javascript
js 声明数组和向数组中添加对象变量的简单实例
2016/07/28 Javascript
Canvas 绘制粒子动画背景
2017/02/15 Javascript
详解vue嵌套路由-params传递参数
2017/05/23 Javascript
echarts实现晶体球面投影的实例教程
2020/10/10 Javascript
[57:12]完美世界DOTA2联赛循环赛 Inki vs Matador BO2第一场 10.31
2020/11/02 DOTA
详解用Python处理HTML转义字符的5种方式
2017/12/27 Python
快速了解python leveldb
2018/01/18 Python
python ftp 按目录结构上传下载的实现代码
2018/09/12 Python
Python3实现的简单工资管理系统示例
2019/03/12 Python
Python利用lxml模块爬取豆瓣读书排行榜的方法与分析
2019/04/15 Python
python安装numpy和pandas的方法步骤
2019/05/27 Python
解决pycharm remote deployment 配置的问题
2019/06/27 Python
详解如何修改python中字典的键和值
2020/09/29 Python
pycharm 如何取消连按两下shift出现的全局搜索
2021/01/15 Python
SQL SERVER面试资料
2013/03/30 面试题
幼儿园园长自我鉴定
2013/10/22 职场文书
护士求职推荐信范文
2013/11/23 职场文书
大学毕业生通用自我评价
2014/01/05 职场文书
大学军训感言1000字
2014/02/25 职场文书
荷叶母亲教学反思
2014/04/30 职场文书
Linux系统下MySQL配置主从分离的步骤
2022/03/21 MySQL