CSS3 制作绽放的莲花采用效果叠加实现


Posted in HTML / CSS onJanuary 31, 2013

这效果看起来挺炫,但原理并不复杂,能实现一片花瓣动起来,就能实现9片花瓣。效果的叠加而已。
HTML:

复制代码
代码如下:

<section class="demo">
<div class="box">
<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>
</section>

CSS:
复制代码
代码如下:

View Code
body {
background-color: #000;
}
.demo {
margin:0px auto;
width: 500px;
}
/*莲花花瓣的容器*/
.box {
position: relative;/*设置相对定位,因为花瓣都要进行绝对定位*/
height: 400px;
margin-top:400px
}
/*花瓣进行绝对定位*/
.box .leaf {
position: absolute;
}
/*绘制莲花花瓣*/
.leaf {
margin-top:0px;
width: 200px;
height: 200px;
border-radius: 200px 0px;/*制作花瓣角*/
background: -moz-linear-gradient(45deg,rgba(188,190,192,1) 8%,rgba(158,31,99,1) 30%,rgba(158,31,99,1) 100%);/*制作花瓣颜色*/
background: -webkit-linear-gradient(45deg,rgba(188,190,192,1) 8%,rgba(158,31,99,1) 30%,rgba(158,31,99,1) 100%);/*制作花瓣颜色*/
opacity: .6;
filter:alpha(opacity=50);
transform: rotate(135deg);/*花瓣旋转135deg*/
transform-origin: top right;/*重置花瓣旋转原点,这个很重要*/
}
@keyframes show-2 {
% {
transform: rotate(135deg);
}
% {
transform: rotate(45deg);
}
%{
transform: rotate(135deg);
}
}
@keyframes show-3 {
% {
transform: rotate(135deg);
}
% {
transform: rotate(65deg);
}
%{
transform: rotate(135deg);
}
}
@keyframes show-4 {
% {
transform: rotate(135deg);
}
% {
transform: rotate(85deg);
}
%{
transform: rotate(135deg);
}
}
@keyframes show-5 {
% {
transform: rotate(135deg);
}
% {
transform: rotate(105deg);
}
%{
transform: rotate(135deg);
}
}
@keyframes show-6 {
% {
transform: rotate(135deg);
}
% {
transform: rotate(165deg);
}
%{
transform: rotate(135deg);
}
}
@keyframes show-7 {
% {
transform: rotate(135deg);
}
% {
transform: rotate(185deg);
}
%{
transform: rotate(135deg);
}
}
@keyframes show-8 {
% {
transform: rotate(135deg);
}
% {
transform: rotate(205deg);
}
%{
transform: rotate(135deg);
}
}
@keyframes show-9 {
% {
transform: rotate(135deg);
}
% {
transform: rotate(225deg);
}
%{
transform: rotate(135deg);
}
}
.leaf:nth-child(1) {
background: -moz-linear-gradient(45deg,rgba(250,250,250,1) 8%,rgba(158,31,99,1) 30%,rgba(158,31,99,1) 100%);/*制作花瓣颜色*/
}
.leaf:nth-child(2) {
animation: show-2 6s ease-in-out infinite;
}
.leaf:nth-child(3) {
animation: show-3 6s ease-in-out infinite;
}
.leaf:nth-child(4) {
animation: show-4 6s ease-in-out infinite;
}
.leaf:nth-child(5) {
animation: show-5 6s ease-in-out infinite;
}
.leaf:nth-child(6) {
animation: show-6 6s ease-in-out infinite;
}
.leaf:nth-child(7) {
animation: show-7 6s ease-in-out infinite;
}
.leaf:nth-child(8) {
animation: show-8 6s ease-in-out infinite;
}
.leaf:nth-child(9) {
animation: show-9 6s ease-in-out infinite;
}

演示:

提示:您可以先修改部分代码再运行
HTML / CSS 相关文章推荐
CSS3弹性布局内容对齐(justify-content)属性使用详解
Jul 31 HTML / CSS
通过css3动画和opacity透明度实现呼吸灯效果
Aug 09 HTML / CSS
CSS3的Border-radius轻松制作圆角
Dec 24 HTML / CSS
CSS3的文字阴影—text-shadow的使用方法
Dec 25 HTML / CSS
CSS3实例分享--超炫checkbox复选框和radio单选框
Sep 01 HTML / CSS
使用CSS3中的calc()属性来以算式表达尺寸数值
Jun 06 HTML / CSS
html5仿支付宝密码框的实现代码
Sep 06 HTML / CSS
H5 canvas中width、height和style的宽高区别详解
Nov 02 HTML / CSS
HTML5 Canvas的事件处理介绍
Apr 24 HTML / CSS
HTML5中外部浏览器唤起微信分享
Jan 02 HTML / CSS
amaze ui 的使用详细教程
Aug 19 HTML / CSS
CSS3常见动画的实现方式
Apr 14 HTML / CSS
CSS3 制作旋转的大风车(充满童年回忆)
Jan 30 #HTML / CSS
css3简单练习实现遨游浏览器logo的绘制
Jan 30 #HTML / CSS
IE滤镜与CSS3效果(详细整理分享)
Jan 25 #HTML / CSS
使用Filters滤镜弥补CSS3的跨浏览器问题以及兼容低版本IE
Jan 23 #HTML / CSS
纯css3无js实现的Android Logo(有简单动画)
Jan 21 #HTML / CSS
定义css设备类型-Media Queries图表简介及使用方法
Jan 21 #HTML / CSS
css3强大的动画效果animate使用说明及浏览器兼容介绍
Jan 09 #HTML / CSS
You might like
mysql+php分页类(已测)
2008/03/31 PHP
40个迹象表明你还是PHP菜鸟
2008/09/29 PHP
PHP文件读写操作之文件写入代码
2011/01/13 PHP
php多文件上传实现代码
2014/02/20 PHP
PHP遍历目录并返回统计目录大小
2014/06/09 PHP
功能强大的PHP图片处理类(水印、透明度、旋转)
2015/10/21 PHP
详解WordPress中添加和执行动作的函数使用方法
2015/12/29 PHP
php 的反射详解及示例代码
2016/08/25 PHP
javascript iframe内的函数调用实现方法
2009/07/19 Javascript
JSP跨iframe如何传递参数实现代码
2013/09/21 Javascript
js生成动态表格并为每个单元格添加单击事件的方法
2014/04/14 Javascript
js实现简单选项卡与自动切换效果的方法
2015/04/10 Javascript
SWFObject基本用法实例分析
2015/07/20 Javascript
JavaScript 封装一个tab效果源码分享
2015/09/15 Javascript
老生常谈的跨域处理
2017/01/11 Javascript
详解如何使用PM2将Node.js的集群变得更加容易
2017/11/15 Javascript
微信小程序倒计时功能实例代码
2018/07/17 Javascript
vue进入页面时滚动条始终在底部代码实例
2019/03/26 Javascript
vue实现评价星星功能
2020/06/30 Javascript
python二分查找算法的递归实现方法
2016/05/12 Python
python循环定时中断执行某一段程序的实例
2019/06/29 Python
Django继承自带user表并重写的例子
2019/11/18 Python
Python面向对象魔法方法和单例模块代码实例
2020/03/25 Python
基于python实现获取网页图片过程解析
2020/05/11 Python
django 装饰器 检测登录状态操作
2020/07/02 Python
解决python pandas读取excel中多个不同sheet表格存在的问题
2020/07/14 Python
python如何爬取网页中的文字
2020/07/28 Python
python使用matplotlib的savefig保存时图片保存不完整的问题
2021/01/08 Python
一款基于css3和jquery实现的动画显示弹出层按钮教程
2015/01/04 HTML / CSS
HTML5+CSS3 诱人的实例:3D立方体旋转动画实例
2016/12/30 HTML / CSS
澳大利亚窗帘商店:Curtain Wonderland
2019/12/01 全球购物
银行实习生的自我评价
2013/12/09 职场文书
幼儿园法制宣传日活动总结
2014/11/01 职场文书
先进个人评语大全
2015/01/04 职场文书
民事上诉状范文
2015/05/22 职场文书
总经理致辞
2015/07/29 职场文书