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 相关文章推荐
收集的22款给力的HTML5和CSS3帮助工具
Sep 14 HTML / CSS
CSS3 实用技巧:实现黑白图像效果示例代码
Jul 11 HTML / CSS
一款恶搞头像特效的制作过程 利用css3和jquery
Nov 21 HTML / CSS
举例详解CSS3中的Transition
Jul 15 HTML / CSS
基于CSS3实现的漂亮Menu菜单效果代码
Sep 10 HTML / CSS
深入理解css属性的选择对动画性能的影响
Apr 20 HTML / CSS
利用CSS3实现开门效果实例源码
Aug 22 HTML / CSS
CSS3的颜色渐变效果的示例代码
Sep 29 HTML / CSS
HTML5 自动聚焦(autofocus)属性使用介绍
Aug 07 HTML / CSS
H5新属性audio音频和video视频的控制详解(推荐)
Dec 09 HTML / CSS
HTML5离线应用与客户端存储的实现
May 03 HTML / CSS
HTML基础详解(下)
Oct 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和JAVA中的重载(overload)和覆盖(override) 介绍
2012/03/01 PHP
PHP SESSION的增加、删除、修改、查看操作
2015/03/20 PHP
php+ajax无刷新上传图片实例代码
2015/11/17 PHP
PHP memcache在微信公众平台的应用方法示例
2017/09/13 PHP
Centos7安装swoole扩展操作示例
2020/03/26 PHP
php设计模式之职责链模式实例分析【星际争霸游戏案例】
2020/03/27 PHP
深入分析PHP设计模式
2020/06/15 PHP
juqery 学习之三 选择器 层级 基本
2010/11/25 Javascript
js获取客户端外网ip的简单实例
2013/11/21 Javascript
Script标签与访问HTML页面详解
2014/01/10 Javascript
jQuery $命名冲突解决方案汇总
2014/11/13 Javascript
jQuery实现动态表单验证时文本框抖动效果完整实例
2015/08/21 Javascript
轻松学习jQuery插件EasyUI EasyUI实现拖放商品放置购物车
2015/11/30 Javascript
浅析Javascript中bind()方法的使用与实现
2016/05/30 Javascript
Vue filter介绍及其使用详解
2017/10/21 Javascript
angular2中Http请求原理与用法详解
2018/01/11 Javascript
vue中的$emit 与$on父子组件与兄弟组件的之间通信方式
2018/05/13 Javascript
Vuepress 搭建带评论功能的静态博客的实现
2019/02/17 Javascript
vue实现百度下拉列表交互操作示例
2019/03/12 Javascript
详解vue在项目中使用百度地图
2019/03/26 Javascript
[36:13]Mineski vs iG 2018国际邀请赛小组赛BO2 第一场 8.16
2018/08/17 DOTA
[01:25:38]DOTA2-DPC中国联赛 正赛 VG vs LBZS BO3 第一场 1月19日
2021/03/11 DOTA
Python+selenium 获取一组元素属性值的实例
2018/06/22 Python
Python字典的概念及常见应用实例详解
2019/10/30 Python
python飞机大战pygame碰撞检测实现方法分析
2019/12/17 Python
使用CSS Grid布局实现网格的流动
2014/12/30 HTML / CSS
什么是唯一索引
2015/07/05 面试题
摄影实习自我鉴定
2013/09/20 职场文书
建筑公司员工自我鉴定
2014/04/08 职场文书
公司口号大全
2014/06/11 职场文书
文明寝室标语
2014/06/13 职场文书
森林防火宣传标语
2014/06/27 职场文书
党员作风建设整改方案
2014/10/27 职场文书
民政局未婚证明
2015/06/15 职场文书
学习党章心得体会2016
2016/01/15 职场文书
《窃读记》教学反思
2016/02/18 职场文书