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& ...

随机推荐

浅析Yii2的view层设计
Yii2.0的view层提供了若干重要的功能:assets资源管理,widgets小组件,layouts布局... 下面将通过对Yii2.0代码直接进行分析,看一下上述功能都是如何实现的,当然细枝末节 ...
WPF开发查询加班小工具
先说一下,我们公司是六点下班,超过7点开始算加班,但是加班的时间是从六点开始计算,以0.5个小时为计数,就是你到了六点半,不算加班半小时,但是加班到七点半,就是加班了一个半小时. 一.打卡记录首先, ...
【转】Linux C动态内存泄漏追踪方法
原文:http://www.cnblogs.com/san-fu-su/p/5737984.html C里面没有垃圾回收机制,有时候你申请了动态内存却忘记释放,这就尴尬了(你的程序扮演了强盗角色,有借 ...
动态给div中新增html
小颖最近接触的项目中用到了 innerHTML 所以小颖今天就自己做了个demo,当当当当代码请看下方: 页面效果:
【原创】开源Math.NET基础数学类库使用(10)C#进行基本数据统计
本博客所有文章分类的总目录:[总目录]本博客博文总目录-实时更新开源Math.NET基础数学类库使用总目录:[目录]开源Math.NET基础数学类库使用总目录前言 ...
Ajax JQuery HTML 提交上传文件File HTML+ Ajax+ASP.NET+ WebService
起因:公司最近有些项目用到了HTML+WebService的组合,发现访问速度等都快了许多,但是由于通过Ajax只能应付一些简单的文字类的传输,上传文件就捉襟见肘了,如果一直引用第三方的swf之类上传 ...
窥探Swift之需要注意的基本运算符和高级运算符
之前更新了一段时间有关Swift语言的博客,连续更新了有6.7篇的样子.期间间更新了一些iOS开发中SQLite.CollectionViewController以及ReactiveCocoa的一些东 ...
iOS开发之WebView
做iOS的应用也有一段时间了,在之前的demo中一直没有机会用到WebView,今天就查缺补漏一下,使用一下WebView.最早接触WebView是在Android中接触的,iOS中的WebView的 ...
项目中遇到的Integer问题--转
Integer类型值相等或不等分析 http://www.cnblogs.com/zzllx/p/5778470.html 看到博客园一位博友写的面试问题,其中一题是 Integer a = 1; I ...
在C#中使用Spire.doc对word的操作总结
在C#中使用Spire.doc对word的操作总结在最近的工程中我们要处理一些word文档.通过在网上的大量搜索,我发现大多数软件功能不是不完整就是有重复.极少数可以完全实现的word组件又要收费. ...

CSS3 莲花盛开动画

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

随机推荐

热门专题