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& ...
随机推荐
- linux创建进程fork的方法步骤
fork创建进程 函数原型如下 #include// 必须引入头文件,使用fork函数的时候,必须包含这个头文件,否则,系统找不到fork函数 pid_t fork(void); //void代表没有 ...
- SSIS Destination 组件使用Fast-Load mode出错
查看一个Package的历史Message 数据,发现 DataFlow Task 经常出错,错误信息的Description是: Description: "While reading c ...
- C#设计模式系列：组合模式（Composite）
1.组合模式简介 1.1>.定义 组合模式主要用来处理一类具有“容器特征”的对象——即它们在充当对象的同时,又可以作为容器包含其他多个对象. 1.2>.使用频率 中高 2.组合模式结构图 ...
- WPF 浏览文件夹，获取其路径
public void GetPath(System.Windows.Controls.TextBox TB) { FolderBrowserDialog FBD = new FolderBrowse ...
- MVC4做网站后台:模块管理1、修改模块信息
网站可能会包含一些模块:像文章.产品.图片.留言等. 栏目模块主要实现功能,启用或禁用模块,模块权限设置,模块上传设置等. 权限设置和上传设置以后专门考虑,先来显示或禁用模块. 1.在顶部导航栏添加管 ...
- JAVA基础代码分享--模拟人机猜拳系统
问题描述: 一.主要功能: .电脑与人互动,实现“剪刀.石头.布”的游戏: 1.1 角色登陆: ******************** ***欢迎进入猜拳游戏*** **************** ...
- HTTP的RST包与WinHttp延迟关闭TCP连接
一.RST包也常见于断开TCP连接 几个月前用wireshark抓HTTP包发现有的网络通信在结束的时候没有使用四次握手,而是直接使用RST包.如: 在TCP协议中RST表示复位,用来异常的关闭连接 ...
- ASP.NET：在一般处理程序中通过 Session 保存验证码却无法显示图片？
using System.Drawing; using System.Web; using System.Web.SessionState; /// <summary> /// Captc ...
- (翻译)Angular.js为什么如此火呢？
在本文中让我们来逐步发掘angular为什么如此火: Angular.js 是一个MV*(Model-View-Whatever,不管是MVC或者MVVM,统归MDV(model Drive View ...
- JS只能输入数字，数字和字母等的正则表达式
1.只能输入英文 <input type="text" onkeyup="value=value.replace(/[^a-zA-Z]/g,'')"> ...