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中检验表单的required,focus,valid和invalid样式
Feb 21 HTML / CSS
CSS Grid布局教程之网格单元格布局
Dec 30 HTML / CSS
css3编写浏览器背景渐变背景色的方法
Mar 05 HTML / CSS
巧用CSS3的calc()宽度计算做响应模式布局的方法
Mar 22 HTML / CSS
CSS3 实现发光边框特效
Nov 11 HTML / CSS
HTML5 Web 存储详解
Sep 16 HTML / CSS
html5 CSS过度-webkit-transition使用介绍
Jul 02 HTML / CSS
HTML5 Canvas实现烟花绽放特效
Mar 02 HTML / CSS
html5需遵循的6个设计原则
Apr 27 HTML / CSS
html5组织内容_动力节点Java学院整理
Jul 10 HTML / CSS
将SVG图引入到HTML页面的实现
Sep 20 HTML / CSS
Html5 video标签视频的最佳实践
Feb 26 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
在smarty模板中使用PHP函数的方法
2011/04/23 PHP
ThinkPHP多语言支持与多模板支持概述
2014/08/22 PHP
Yii使用find findAll查找出指定字段的实现方法
2014/09/05 PHP
腾讯CMEM的PHP扩展编译安装方法
2015/09/25 PHP
jQuery ajax+PHP实现的级联下拉列表框功能示例
2019/02/12 PHP
Dom在ajax技术中的作用说明
2010/10/25 Javascript
Jquery ajaxsubmit上传图片实现代码
2010/11/04 Javascript
模拟多级复选框效果的jquery代码
2013/08/13 Javascript
使用jquery获取网页中图片高度的两种方法
2013/09/26 Javascript
jQuery Mobile 导航栏代码
2013/11/01 Javascript
JavaScript计算器网页版实现代码分享
2016/07/15 Javascript
javascript中this关键字详解
2016/12/12 Javascript
javascript和jQuery中的AJAX技术详解【包含AJAX各种跨域技术】
2016/12/15 Javascript
Bootstrap整体框架之JavaScript插件架构
2016/12/15 Javascript
js中常用的Math方法总结
2017/01/12 Javascript
jQuery元素选择器实例代码
2017/02/06 Javascript
详解webpack+vue-cli项目打包技巧
2017/06/17 Javascript
jQuery完成表单验证的实例代码(纯代码)
2017/09/30 jQuery
JavaScript中正则表达式使数字、中文或指定字符高亮显示
2017/10/31 Javascript
react实现换肤功能的示例代码
2018/08/14 Javascript
jQuery子选择器与可见性选择器实例分析
2019/06/28 jQuery
python中plot实现即时数据动态显示方法
2018/06/22 Python
python 实现将文件或文件夹用相对路径打包为 tar.gz 文件的方法
2019/06/10 Python
OpenCV+Python--RGB转HSI的实现
2019/11/27 Python
Python +Selenium解决图片验证码登录或注册问题(推荐)
2020/02/09 Python
python实现一次性封装多条sql语句(begin end)
2020/06/06 Python
python框架flask入门之环境搭建及开启调试
2020/06/07 Python
如何使用python-opencv批量生成带噪点噪线的数字验证码
2020/12/21 Python
美国当红的名品折扣网:Gilt Groupe
2016/08/15 全球购物
Alba Moda瑞士网上商店:独家意大利时尚女装销售
2016/11/28 全球购物
Ruby如何实现动态方法调用
2012/11/18 面试题
商务专员岗位职责
2013/11/23 职场文书
关于期中考试的反思
2014/02/02 职场文书
宿舍保安职务说明书
2014/02/25 职场文书
员工激励培训演讲稿
2014/09/16 职场文书
使用Redis实现点赞取消点赞的详细代码
2022/03/20 Redis