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& ...
随机推荐
- SQL Server 自动增长过大
一.背景 我们遇到的问题如下图所示:自动增长无端端就按照这样的比例进行增长: (Figure1:问题所在) 尝试使用SSMS修改自动增长值,就会出现下面的错误: (Figure2:错误信息) 遇到上面 ...
- Qt with OpenCascade
Qt with OpenCascade 摘要Abstract:详细介绍了如何在Qt中使用OpenCascade. 关键字Key Words:Qt.OpenCascade 一.引言 Introducti ...
- VXLAN 概念（Part I） - 每天5分钟玩转 OpenStack（108）
除了前面讨论的 local, flat, vlan 这几类网络,OpenStack 还支持 vxlan 和 gre 这两种 overlay network. overlay network 是指建立在 ...
- iOS 利用JSPatch 添加热补丁功能
ios 由于苹果的审核政策,一旦上线后发现bug是件让人崩溃的事情 不过可以利用oc的runtime机制可以家用JSPatch动态的为工程打热补丁 下载地址:https://github.com/ag ...
- Opencv VideoCapture实时捕捉摄像头信息
#include "opencv2/highgui/highgui.hpp" #include <iostream> using namespace cv; using ...
- ZOJ Problem Set - 1067 Color Me Less
这道题目很简单,考察的就是结构体数组的应用,直接贴代码了 #include <stdio.h> #include <math.h> typedef struct color { ...
- struts2学习笔记--上传单个和批量文件示例
struts2提供了对上传文件的支持,将上传后的文件封装为java.io.File对象,开发者只需要在Action中定义一个File类型的变量,然后直接使用该变量,将它复制到目的目录即可. 单个文件上 ...
- mininet和ryu控制器的连接
1.执行ryu应用程式:ryu-manager --verbose ryu.app.simple_switch_13 2.启动mininet,配置如下:创建3个host,1个交换器(open vSwi ...
- KVM的前世今生
1.虚拟化技术的演变过程:软件模拟.虚拟化层翻译.容器虚拟化三个阶段 (1)软件模拟的技术方式 软件模拟是通过软件完全模拟CPU.网卡.芯片组.磁盘等计算机硬件,因为是软件模拟,所以理论上可以模拟任何 ...
- 多个Activity相互调用和Intent
MainActivity.java和OtherActivity.java的相互调用 首先MainActivity.java是Android程序自带的,新建一个类OtherActiviy extends ...