css3 呼吸的莲花_CSS3 莲花盛开动画

效果图：

代码如下：

CSS3制作莲花开放动画-柯乐义

/*定义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;

}

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代码:

JavaScript Patterns 5.2 Declaring Dependencies

It’s a good idea to declare the modules your code relies on at the top of your function or module. T ...

Ubuntu13.04配置：Vim+Syntastic+Vundle+YouCompleteMe

序言 使用Ubuntu和vim已经有一段时间了,对于Vim下的插件应用,我总是抱着一股狂热的态度.这次,又在网上闲逛着,发现了一个个人博客提到了Vim代码补全这回事,并提到了YouCompleteMe ...

mysql 性能问题

1.场景,模拟一天的数据,每个10秒,遍历1000个设备,每个设备模拟一个实时数据,总的数据量为:24*60*60/10*1000 = 864万条记录.2.采用策略,对时间分段,拼接sql语句查询,对 ...

【C语言用法】C语言的函数“重载”

由于平时很少用到__attribute__定义函数或者变量的符号属性,所以很难想象C语言可以向C++一样进行函数或者变量的重载. 首先,复习一下有关强符号与弱符号的概念和编译器对强弱符号的处理规则: ...

docker~使用阿里加速器安centos

回到目录 上一篇说了hub.docker.com里拉个镜像太,而阿里云为我们做了不少本国镜像,这样下载的速度就很惊人了,下面看一下在centos7下配置阿里云加速器的方法 打开服务配置文件 vi /e ...

SimpleDateFormat 常规用法

public class SimpleDateFormat extends DateFormat SimpleDateFormat 是一个以国别敏感的方式格式化和分析数据的具体类. 它允许格式化 (d ...

kubernetes实践之运行aspnetcore webapi微服务

1.预备工作 unbuntu 16.04 and above docker kubernetes 集群 2.使用vs2017创建一个web api应用程序,并打包镜像到本地. 3.推送本地镜像到doc ...

ubuntu 下redis的安装简介

Linux公社:https://www.linuxidc.com/topicnews.aspx?page=2&tid=2 简单介绍下ubuntu下redis的安装方式: 第一种: 1:进入re ...