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实现tab选项卡切换示例代码
Sep 21 HTML / CSS
纯css3使用vw和vh实现自适应的方法
Feb 09 HTML / CSS
css3实现背景动态渐变效果
Dec 10 HTML / CSS
html5仿支付宝密码框的实现代码
Sep 06 HTML / CSS
html5配合css3实现带提示文字的输入框(摆脱js)
Mar 08 HTML / CSS
为你的html5网页添加音效示例
Apr 03 HTML / CSS
针对HTML5的Web Worker使用攻略
Jul 12 HTML / CSS
详解快速开发基于 HTML5 网络拓扑图应用
Jan 08 HTML / CSS
用canvas显示验证码的实现
Apr 10 HTML / CSS
CSS3新特性详解(五):多列columns column-count和flex布局
Apr 30 HTML / CSS
CSS控制继承中的height能变为可继承吗
Jun 10 HTML / CSS
CSS 实现磨砂玻璃(毛玻璃)效果样式
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
资料注册后发信小技巧
2006/10/09 PHP
打造超酷的PHP数据饼图效果实现代码
2011/11/23 PHP
PHP静态调用非静态方法的应用分析
2013/05/02 PHP
PHP设计模式之迭代器模式
2016/06/17 PHP
Yii2框架RESTful API 格式化响应,授权认证和速率限制三部分详解
2016/11/10 PHP
使用PHP+MySql+Ajax+jQuery实现省市区三级联动功能示例
2017/09/15 PHP
BOOM vs RR BO5 第一场 2.14
2021/03/10 DOTA
javascript中使用css需要注意的地方小结
2010/09/01 Javascript
prettify 代码高亮着色器google出品
2010/12/28 Javascript
JS检测输入字符是否包含非法字符的示例代码
2014/02/11 Javascript
常见的原始JS选择器使用方法总结
2014/04/09 Javascript
jquery实现用户信息修改验证输入方法汇总
2015/07/18 Javascript
AngularJS基础 ng-model-options 指令简单示例
2016/08/02 Javascript
Vue组件中的data必须是一个function的原因浅析
2018/09/03 Javascript
vue3.0 CLI - 2.6 - 组件的复用入门教程
2018/09/14 Javascript
微信小程序与webview交互实现支付功能
2019/06/07 Javascript
解决layer.msg 不居中 ifram中的问题
2019/09/05 Javascript
Python程序中使用SQLAlchemy时出现乱码的解决方案
2015/04/24 Python
python学习入门细节知识点
2018/03/29 Python
Python注释、分支结构、循环结构、伪“选择结构”用法实例分析
2020/01/09 Python
Django后台管理系统的图文使用教学
2020/01/20 Python
python爬虫构建代理ip池抓取数据库的示例代码
2020/09/22 Python
详解pandas apply 并行处理的几种方法
2021/02/24 Python
英国领先的野生鸟类食品供应商:GardenBird
2018/08/09 全球购物
如何现实servlet的单线程模式
2014/08/05 面试题
护理自荐信范文
2013/10/05 职场文书
担保书怎么写
2014/04/01 职场文书
大学新生军训方案
2014/05/03 职场文书
环保建议书500字
2014/05/14 职场文书
同志主要表现材料
2014/08/21 职场文书
一份文言文检讨书
2014/09/13 职场文书
乡镇党委书记个人整改措施
2014/09/15 职场文书
毕业论文答辩开场白和答辩技巧
2015/05/27 职场文书
社区结对共建协议书
2016/03/23 职场文书
Django Paginator分页器的使用示例
2021/06/23 Python
讲解Python实例练习逆序输出字符串
2022/05/06 Python