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的flexbox实现水平垂直居中与三列等高布局
Sep 12 HTML / CSS
利用CSS3的transform做的动态时钟效果
Sep 21 HTML / CSS
使用CSS Grid布局实现网格的流动
Dec 30 HTML / CSS
浅析与CSS3的loading动画加载相关的transition优化
May 18 HTML / CSS
localStorage 设置过期时间的方法实现
Dec 21 HTML / CSS
使用html5+css3来实现slider切换效果告别javascript+css
Jan 08 HTML / CSS
html标签之Object和EMBED标签详解
Jul 04 HTML / CSS
html5教程画矩形代码分享
Dec 04 HTML / CSS
HTML5新增元素如何兼容旧浏览器有哪些方法
May 09 HTML / CSS
详解canvas绘图时遇到的跨域问题
Mar 22 HTML / CSS
html5实现输入框fixed定位在屏幕最底部兼容性
Jul 03 HTML / CSS
Html5通过数据流方式播放视频的实现
Apr 27 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
PHP 开发工具
2006/12/06 PHP
php基础知识:类与对象(4) 范围解析操作符(::)
2006/12/13 PHP
PHP实现微信图片上传到服务器的方法示例
2017/06/29 PHP
yii2局部关闭(开启)csrf的验证的实例代码
2017/07/10 PHP
PHP中常用的三种设计模式详解【单例模式、工厂模式、观察者模式】
2019/06/14 PHP
Laravel框架Auth用户认证操作实例分析
2019/09/29 PHP
JS中批量给元素绑定事件过程中的相关问题使用闭包解决
2013/04/15 Javascript
javascript创建数组之联合数组的使用方法示例
2013/12/26 Javascript
jQuery学习笔记之总体架构
2014/06/03 Javascript
Windows系统下安装Node.js的步骤图文详解
2016/11/15 Javascript
基于ajax与msmq技术的消息推送功能实现代码
2016/12/26 Javascript
javascript 操作cookies详解及实例
2017/02/22 Javascript
详解基于webpack和vue.js搭建开发环境
2017/04/05 Javascript
JAVA中截取字符串substring用法详解
2017/04/14 Javascript
Vue之Watcher源码解析(2)
2017/07/19 Javascript
jQuery轮播图实例详解
2018/08/15 jQuery
微信小程序wepy框架学习和使用心得详解
2019/05/24 Javascript
JS中的算法与数据结构之队列(Queue)实例详解
2019/08/20 Javascript
jquery实现拖拽小方块效果
2020/12/10 jQuery
js实现类选择器和name属性选择器的示例步骤
2021/02/07 Javascript
Python反转序列的方法实例分析
2018/03/21 Python
python3+PyQt5实现柱状图
2018/04/24 Python
Python安装pycurl失败的解决方法
2018/10/15 Python
使用python将请求的requests headers参数格式化方法
2019/01/02 Python
Python计算时间间隔(精确到微妙)的代码实例
2019/02/26 Python
Windows10下 python3.7 安装 facenet的教程
2019/09/10 Python
Python高级property属性用法实例分析
2019/11/19 Python
Python post请求实现代码实例
2020/02/28 Python
Python HTMLTestRunner可视化报告实现过程解析
2020/04/10 Python
去除python中的字符串空格的简单方法
2020/12/22 Python
美国著名的婴儿学步鞋老品牌:Robeez
2016/08/20 全球购物
linux面试题参考答案(4)
2013/01/28 面试题
2014年学生工作总结
2014/11/20 职场文书
2016年教师政治思想表现评语
2015/12/02 职场文书
Python自动化测试PO模型封装过程详解
2021/06/22 Python
vue项目配置sass及引入外部scss文件
2022/04/14 Vue.js