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

随机推荐

SSIS Design2：增量更新
一般来说,ETL实现增量更新的方式有两种,第一种:记录字段的最大值,如果数据源中存在持续增加的数据列,记录上次处理的数据集中,该列的最大值:第二种是,保存HashValue,快速检查所有数据,发现异动 ...
Constraint2：constraint
一,Constraint 是表定义的一部分,用于实现数据完整性. Data Integrity 由三种类型的constraint实现: Entity Integrity:数据是唯一的.约束: prim ...
深入学习jQuery选择器系列第五篇——过滤选择器之内容选择器
× 目录 [1]contains [2]empty [3]parent[4]has[5]not[6]header[7]lang[8]root 前面的话本文介绍过滤选择器中的内容选择器.内容选择器的过 ...
JAVA--继承
项目开发遇到一个问题,稀里糊涂给实现了,现在重点讨论一下这是个什么情况,大神们如果看到希望给点指点. 问题:子类与父类具有相同的属性和方法,将子类实例化为父类,调用对应属性的get.set方法,打印出 ...
java的栈图形演示
import java.awt.*; import javax.swing.*; import java.awt.event.*; /* 指示发生了组件定义的动作的语义事件.当特定于组件的动作(比如被 ...
如何用C#代码判断一个类的类型
var s = ""; s.GetType().IsClass; 来自为知笔记(Wiz)
Windows下Go语言的环境搭建
在本地搭建了一个开发GO语言的开发环境,给大家分享一下用go语言写的第一个hello world的过程,希望对大家有所帮助. 1.想写GO语言首先得下载go语言的开发包官方下载地址:https:// ...
设计窘境：来自 Repository 的一丝线索，Domain Model 再重新设计
写在前面阅读目录: 疑惑解读设计窘境一幅图的灵感为嘛还是你-Repository 后记上一篇<No zuo no die:DDD 应对具体业务场景,Domain Model 重新设计& ...
【经验之谈】Windows环境下配置WordPress
前言 wordpress全球著名的开放博客平台,拥有成千上万个各式插件和不计其数的主题模板样式,使用php和mysql搭建,下面说下载windows环境下配置wordpress,经验之谈. 安装关于 ...
Spring对事务管理的支持的发展历程--转
原文地址:http://www.iteye.com/topic/1123049 1.问题 Connection conn = DataSourceUtils.getConnection(); //开启 ...

CSS3 莲花盛开动画

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

随机推荐

热门专题