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实现动态的二级三级菜单效果实例源码
Jan 04 HTML / CSS
CSS3盒子模型详解
Apr 24 HTML / CSS
详解CSS3中border-image的使用
Jul 18 HTML / CSS
详解CSS3中强大的filter(滤镜)属性
Jun 29 HTML / CSS
html5 桌面提醒:Notifycations应用介绍
Nov 27 HTML / CSS
HTML5 语音搜索(淘宝店语音搜素)
Jan 03 HTML / CSS
html5教程画矩形代码分享
Dec 04 HTML / CSS
html5教程调用绘图api画简单的圆形代码分享
Dec 04 HTML / CSS
用HTML5 实现橡皮擦的涂抹效果的教程
May 11 HTML / CSS
canvas 基础之图像处理的使用
Apr 10 HTML / CSS
HTML通过表单实现酒店筛选功能
May 18 HTML / CSS
CSS list-style-type属性使用方法
May 21 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
CI框架给视图添加动态数据
2014/12/01 PHP
php session实现多级目录存放实现代码
2016/02/03 PHP
PHPCMS V9 添加二级导航的思路详解
2016/10/20 PHP
Prototype使用指南之form.js
2007/01/10 Javascript
可以文本显示的公告栏的js代码
2007/03/11 Javascript
jQuery-ui中自动完成实现方法
2010/06/10 Javascript
浅析用prototype定义自己的方法
2013/11/14 Javascript
js通过八个点 拖动改变div大小的实现方法
2014/03/05 Javascript
简介JavaScript中getUTCMonth()方法的使用
2015/06/10 Javascript
Node.js巧妙实现Web应用代码热更新
2015/10/22 Javascript
Javascript页面跳转常见实现方式汇总
2015/11/28 Javascript
学做Bootstrap的第一个页面
2016/05/15 HTML / CSS
javascript中apply/call和bind的使用
2017/02/15 Javascript
dts文件中删除一个node或属性的操作方法
2018/08/05 Javascript
微信小程序实现列表页的点赞和取消点赞功能
2018/11/02 Javascript
vue自定义指令实现仅支持输入数字和浮点型的示例
2019/10/30 Javascript
详解在Python的Django框架中创建模板库的方法
2015/07/20 Python
linecache模块加载和缓存文件内容详解
2018/01/11 Python
python requests爬取高德地图数据的实例
2018/11/10 Python
解决python3.5 正常安装 却不能直接使用Tkinter包的问题
2019/02/22 Python
python excel转换csv代码实例
2019/08/26 Python
对python中的*args与**kwgs的含义与作用详解
2019/08/28 Python
在Python中利用pickle保存变量的实例
2019/12/30 Python
Python编程快速上手——strip()函数的正则表达式实现方法分析
2020/02/29 Python
Python colormap库的安装和使用详情
2020/10/06 Python
比利时网上药店: Drogisterij.net
2017/03/17 全球购物
私有程序集与共享程序集有什么区别
2013/04/05 面试题
用Python写一个for循环的例子
2016/07/19 面试题
火车的故事教学反思
2014/02/11 职场文书
基层党员公开承诺书
2014/05/29 职场文书
运动会拉拉队口号
2014/06/09 职场文书
小学三好学生事迹材料
2014/08/15 职场文书
企业爱岗敬业演讲稿
2014/09/04 职场文书
青岛导游词
2015/02/12 职场文书
PHP实现两种排课方式
2021/06/26 PHP
Nginx防盗链与服务优化配置的全过程
2022/01/18 Servers