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& ...
随机推荐
- Echarts3 关系图-力导向布局图
因为项目需要,要求实现类似力导图效果的图,我就瞄上了echarts. 注意事项1:由于我的项目要部署到内网,所以js文件要在本地,网上大多力导图都是echarts2的,而其又依赖zrender基础库, ...
- C#设计模式系列：代理模式（Proxy）
代理模式提供了一个中介控制对某个对象的访问.现实生活中,我们可能会用支票在市场交易中用来代替现金,支票就是账户中资金的代理. 1.代理模式简介 1.1>.定义 代理模式(Proxy)定义:代理模 ...
- [WPF]带下拉列表的文本框
控件我已经弄好了,代码比较多,所以没办法全面介绍. 一开始我是直接继承Selector类来实现,做是做出来了,不过发现性能不太好.于是,我就想着自己来实现.毕竟我是做给自己用的,也不考虑过多的东西,也 ...
- 推荐21款最佳 HTML5 网页游戏
尽管 HTML5 的完全实现还有很长的路要走,但 HTML5 正在改变 Web,未来 HTML5 将把 Web 带入一个更加成熟和开放的应用平台.现在,越来越多的人尝试用 HTML5 来制作网页游戏等 ...
- 推荐12个漂亮的 CSS3 按钮实现方案
在过去,我们都是使用图片或者JavaScript来实现漂亮的按钮效果,随着越来越多的浏览器对CSS3的支持和完善,使用CSS3来实现美观的按钮已没有太多的障碍.今天,本文收集了12个很不错的CSS3按 ...
- Python标准模块--collections
1.模块简介 collections包含了一些特殊的容器,针对Python内置的容器,例如list.dict.set和tuple,提供了另一种选择: namedtuple,可以创建包含名称的tuple ...
- Android实现对图片的缩放、剪切、旋转、存储
转载:http://www.cnblogs.com/jerehedu/p/4464870.html 一.问题描述: 在开发中,当我们需要的有一张大图片同时还需要一些小图片时,我们只需要通过代码对此图片 ...
- Form authentication（表单认证）问题
前言 最近在做ASP.NET MVC中表单认证时出了一些问题,特此记录. 问题 进行表单认证时,在 PostAuthenticateRequest 事件中从Cookie值中解密票据.如下: prote ...
- JavaSE高级之GUI编程
下面主要用到了java中的swing进行界面设计,当然java的GUI不如C#的设计的好看,不过原理还是要会的. 1． GUI Graphical User Interface 用户图形界面 a) 主 ...
- swift 中数据类型那个的转换
在swift中关于数据类型的转换,如果参数是可选类型? 那么打印或者转换的结果 会带有Optional 字样,,