CSS3 莲花盛开动画

点击这里查看效果：http://keleyi.com/a/bjad/32gxxsaw.htm

或者：http://keleyi.com/keleyi/phtml/css3/10a.htm

效果图：

代码如下：

 <!DOCTYPE html><html>

 <head><meta charset="UTF-8">

 <title>CSS3制作莲花开放动画-柯乐义</title>

 <script type="text/javascript" src="http://keleyi.com/keleyi/phtml/css3/10/prefixfree.min.js"></script>

 <style>/*定义变量*/

 /*定义Mixins*/

 @keyframes openAnimate {

   to {

     -webkit-transform: rotate(360deg);

     -webkit-transform-origin: top right;

     -moz-transform: rotate(360deg);

     -moz-transform-origin: top right;

     -ms-transform: rotate(360deg);

     -ms-transform-origin: top right;

     -o-transform: rotate(360deg);

     -o-transform-origin: top right;

     transform: rotate(360deg);

     transform-origin: top right;

   }

 }

 body {

   background-color: #ccc;

 }

 .demo {

   width: 225px;

   height: 225px;

   margin: 300px auto 0;

   position: relative;

   -webkit-transform: rotate(135deg);

   -webkit-transform-origin: center center;

   -moz-transform: rotate(135deg);

   -moz-transform-origin: center center;

   -ms-transform: rotate(135deg);

   -ms-transform-origin: center center;

   -o-transform: rotate(135deg);

   -o-transform-origin: center center;

   transform: rotate(135deg);

   transform-origin: center center;

 }

 .demo .leaf {

   width: 150px;

   height: 150px;

   border-radius: 150px 0px;

   background: linear-gradient(45deg, #bcbec0 8%, #9e1f63 30%, #9e1f63 100%);

   opacity: 0.6;

   filter: alpha(opacity=60);

   position: absolute;

   margin-top: 400px;

   -webkit-animation: openAnimate 6s ease-in-out infinite alternate;

   -moz-animation: openAnimate 6s ease-in-out infinite alternate;

   -o-animation: openAnimate 6s ease-in-out infinite alternate;

   animation: openAnimate 6s ease-in-out infinite alternate;

 }

 .demo .leaf:nth-child( 10n + 10) {

   -webkit-animation-delay: 1s;

   -moz-animation-delay: 1s;

   -o-animation-delay: 1s;

   animation-delay: 1s;

   -webkit-transform: rotate(540deg);

   -webkit-transform-origin: top right;

   -moz-transform: rotate(540deg);

   -moz-transform-origin: top right;

   -ms-transform: rotate(540deg);

   -ms-transform-origin: top right;

   -o-transform: rotate(540deg);

   -o-transform-origin: top right;

   transform: rotate(540deg);

   transform-origin: top right;

 }

 .demo .leaf:nth-child( 10n + 9) {

   -webkit-animation-delay: 0.9s;

   -moz-animation-delay: 0.9s;

   -o-animation-delay: 0.9s;

   animation-delay: 0.9s;

   -webkit-transform: rotate(504deg);

   -webkit-transform-origin: top right;

   -moz-transform: rotate(504deg);

   -moz-transform-origin: top right;

   -ms-transform: rotate(504deg);

   -ms-transform-origin: top right;

   -o-transform: rotate(504deg);

   -o-transform-origin: top right;

   transform: rotate(504deg);

   transform-origin: top right;

 }

 .demo .leaf:nth-child( 10n + 8) {

   -webkit-animation-delay: 0.8s;

   -moz-animation-delay: 0.8s;

   -o-animation-delay: 0.8s;

   animation-delay: 0.8s;

   -webkit-transform: rotate(468deg);

   -webkit-transform-origin: top right;

   -moz-transform: rotate(468deg);

   -moz-transform-origin: top right;

   -ms-transform: rotate(468deg);

   -ms-transform-origin: top right;

   -o-transform: rotate(468deg);

   -o-transform-origin: top right;

   transform: rotate(468deg);

   transform-origin: top right;

 }

 .demo .leaf:nth-child( 10n + 7) {

   -webkit-animation-delay: 0.7s;

   -moz-animation-delay: 0.7s;

   -o-animation-delay: 0.7s;

   animation-delay: 0.7s;

   -webkit-transform: rotate(432deg);

   -webkit-transform-origin: top right;

   -moz-transform: rotate(432deg);

   -moz-transform-origin: top right;

   -ms-transform: rotate(432deg);

   -ms-transform-origin: top right;

   -o-transform: rotate(432deg);

   -o-transform-origin: top right;

   transform: rotate(432deg);

   transform-origin: top right;

 }

 .demo .leaf:nth-child( 10n + 6) {

   -webkit-animation-delay: 0.6s;

   -moz-animation-delay: 0.6s;

   -o-animation-delay: 0.6s;

   animation-delay: 0.6s;

   -webkit-transform: rotate(396deg);

   -webkit-transform-origin: top right;

   -moz-transform: rotate(396deg);

   -moz-transform-origin: top right;

   -ms-transform: rotate(396deg);

   -ms-transform-origin: top right;

   -o-transform: rotate(396deg);

   -o-transform-origin: top right;

   transform: rotate(396deg);

   transform-origin: top right;

 }

 .demo .leaf:nth-child( 10n + 5) {

   -webkit-animation-delay: 0.5s;

   -moz-animation-delay: 0.5s;

   -o-animation-delay: 0.5s;

   animation-delay: 0.5s;

   -webkit-transform: rotate(360deg);

   -webkit-transform-origin: top right;

   -moz-transform: rotate(360deg);

   -moz-transform-origin: top right;

   -ms-transform: rotate(360deg);

   -ms-transform-origin: top right;

   -o-transform: rotate(360deg);

   -o-transform-origin: top right;

   transform: rotate(360deg);

   transform-origin: top right;

 }

 .demo .leaf:nth-child( 10n + 4) {

   -webkit-animation-delay: 0.4s;

   -moz-animation-delay: 0.4s;

   -o-animation-delay: 0.4s;

   animation-delay: 0.4s;

   -webkit-transform: rotate(324deg);

   -webkit-transform-origin: top right;

   -moz-transform: rotate(324deg);

   -moz-transform-origin: top right;

   -ms-transform: rotate(324deg);

   -ms-transform-origin: top right;

   -o-transform: rotate(324deg);

   -o-transform-origin: top right;

   transform: rotate(324deg);

   transform-origin: top right;

 }

 .demo .leaf:nth-child( 10n + 3) {

   -webkit-animation-delay: 0.3s;

   -moz-animation-delay: 0.3s;

   -o-animation-delay: 0.3s;

   animation-delay: 0.3s;

   -webkit-transform: rotate(288deg);

   -webkit-transform-origin: top right;

   -moz-transform: rotate(288deg);

   -moz-transform-origin: top right;

   -ms-transform: rotate(288deg);

   -ms-transform-origin: top right;

   -o-transform: rotate(288deg);

   -o-transform-origin: top right;

   transform: rotate(288deg);

   transform-origin: top right;

 }

 .demo .leaf:nth-child( 10n + 2) {

   -webkit-animation-delay: 0.2s;

   -moz-animation-delay: 0.2s;

   -o-animation-delay: 0.2s;

   animation-delay: 0.2s;

   -webkit-transform: rotate(252deg);

   -webkit-transform-origin: top right;

   -moz-transform: rotate(252deg);

   -moz-transform-origin: top right;

   -ms-transform: rotate(252deg);

   -ms-transform-origin: top right;

   -o-transform: rotate(252deg);

   -o-transform-origin: top right;

   transform: rotate(252deg);

   transform-origin: top right;

 }

 .demo .leaf:nth-child( 10n + 1) {

   -webkit-animation-delay: 0.1s;

   -moz-animation-delay: 0.1s;

   -o-animation-delay: 0.1s;

   animation-delay: 0.1s;

   -webkit-transform: rotate(216deg);

   -webkit-transform-origin: top right;

   -moz-transform: rotate(216deg);

   -moz-transform-origin: top right;

   -ms-transform: rotate(216deg);

   -ms-transform-origin: top right;

   -o-transform: rotate(216deg);

   -o-transform-origin: top right;

   transform: rotate(216deg);

   transform-origin: top right;

 }

 </style></head><body>

 <header id="header">

   <hgrounp class="white blank">

     <h1>CSS3制作莲花开放</h1>

   </hgrounp>

 </header>

 <section class="demo">

   <div class="leaf"></div>

   <div class="leaf"></div>

   <div class="leaf"></div>

   <div class="leaf"></div>

   <div class="leaf"></div>

   <div class="leaf"></div>

   <div class="leaf"></div>

   <div class="leaf"></div>

   <div class="leaf"></div>

   <div class="leaf"></div>

 </section>

 </body></html>

web前端：http://www.cnblogs.com/jihua/p/webfront.html

prefixfree.min.js：http://keleyi.com/a/bjad/vjek766g.htm

CSS3 莲花盛开动画的更多相关文章

css3制作旋转动画
现在的css3真是强大,之前很多动画都是用jq来实现,但是css3制作的动画要比jq实现起来简单很多,今天呢,我自己也写了一个css旋转动画和大家分享.效果如下面的图片思路:1.制作之前呢,我们先来 ...
CSS3中的动画效果记录
今天要记录的是CSS3中的三种属性transform.transition以及animation,这三个属性大大提升了css处理动画的能力. 一.Transform 变形 CSS中transform ...
css3实现的动画效果
在线演示:莲花盛开在线演示:忙碌光标效果在线演示:发光效果
CSS3的自定义动画帧
CSS3新增的动画帧非常绚丽,可以简单实现一些动画效果,目前除IE外各大主流浏览器都支持本文演示三个:transform: scale3d(x, y, z)-缩放;.transform: trans ...
CSS3中的动画功能（一）
css3中的动画功能分为transitions功能和animations功能,这两种功能都可以通过改变css属性值来产生动画效果.今天带大家一起来看看css3动画功能中的transitions的用法. ...
3D Grid Effect – 使用 CSS3 制作网格动画效果
今天我们想与大家分享一个小的动画概念.这个梦幻般的效果是在马库斯·埃克特的原型应用程序里发现的.实现的基本思路是对网格项目进行 3D 旋转,扩展成全屏,并呈现内容.我们试图模仿应用程序的行为,因此 ...
25个CSS3 渐变和动画效果教程
随着最新版CSS3渐变和动画功能发布,Web开发者在开发的过程中有了更多的选择.实际上,已经有了一些替代的技术,目的都是使网站的建设变得简易,高效和快速.不过CSS3所提供的渐变功能有着显著的优点,特 ...
纯css3实现的动画加载条
之前大大家分享了很多款加载条.今天给大家带来一款纯css3实现的动画加载条. 这款加载条适用浏览器:360.FireFox.Chrome.Safari.Opera.傲游.搜狗.世界之窗. 不支持IE8 ...
纯css3实现的动画加载特效
之前给大家带了很多款进度加载条,今天再给大家分享一款纯css3实现的动画加载特效.效果图如下: 在线预览源码下载实现的代码. html代码: <div class="wrap& ...

随机推荐

iOS----- Crash 分析（文三）- 符号化崩溃日志
未符号化的崩溃日志就象一本天书,看不懂,更别谈分析崩溃原因了.所以我们在分析日志之前,要把日志翻译成我们可以看得懂的文字.这一步我们称之为符号化. 在iOS Crash分析(文一)中已经提到过符号化的 ...
Java基础-输入输出-3.编写BinIoDemo.java的Java应用程序，程序完成的功能是：完成1.doc文件的复制，复制以后的文件的名称为自己的学号姓名.doc。
3.编写BinIoDemo.java的Java应用程序,程序完成的功能是:完成1.doc文件的复制,复制以后的文件的名称为自己的学号姓名.doc. try { FileInputStream in = ...
MacOS中使用QT开发iOS应用
因为项目合同中规定一部分业务内容要在手机端实现,包括安卓机和苹果机,因此选择了QT作为开发工具.程序在Win10和安卓系统上已经完美运行,这几天开始搭建iOS的编译和发布环境,因为以前没有使用过mac ...
MongoDB 文档的删除操作
在db中删除数据是十分危险的事,建议使用logic delete,即在doc中增加一个field:IsDeleted,将其设置为1,表示该doc在逻辑上被删除,这种workaround将delete操 ...
配置 L3 agent - 每天5分钟玩转 OpenStack（99）
上一节我们介绍了路由服务(Routing)的基本功能,今天教大家如何配置. Neutron 的路由服务是由 l3 agent 提供的. 除此之外,l3 agent 通过 iptables 提供 fir ...
QuickContactBadge去掉三角
我们首先来分析一下QuickContactBadge源码在QuickContactBadge构造函数中会给mOverlay赋值 private Drawable mOverlay; public Q ...
Util应用程序框架公共操作类(四):验证公共操作类
为了能够验证领域实体,需要一个验证公共操作类来提供支持.由于我将使用企业库(Enterprise Library)的验证组件来完成这项任务,所以本文也将演示对第三方框架的封装要点. .Net提供了一个 ...
简单测试nginx1.90做TCP协议负载均衡的功能
最近工作中需要做TCP层面的负载均衡,以前网站用的反向代理nginx只支持应用层的负载均衡,对于TCP协议是无能为力的,需要使用LVS(linux虚拟服务器). LVS的特点是高性能和极复杂的配置.对 ...
Int，Long比较重使用equal替换==
首先,==有很多限制,如Integer 类型的值在[-128,127] 期间,Integer 用 “==”是可以的(参考),超过范围则不行,那么使用equal则代替则完全ok public stati ...
使用yield进行异步流程控制
现状目前我们对异步回调的解决方案有这么几种:回调,deferred/promise和事件触发.回调的方式自不必说,需要硬编码调用,而且有可能会出现复杂的嵌套关系,造成"回调黑洞" ...

CSS3 莲花盛开动画

CSS3 莲花盛开动画的更多相关文章

随机推荐

热门专题