CSS3实现莲花绽放的动画效果


Posted in HTML / CSS onNovember 06, 2020

先来看效果:

CSS3实现莲花绽放的动画效果

这效果看起来挺炫,但原理并不复杂,能实现一片花瓣动起来,就能实现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 {
    0% {
     transform: rotate(135deg);
    }
    50% {
     transform: rotate(45deg);
    }
    100%{
     transform: rotate(135deg);
    }
}
@keyframes show-3 {
    0% {
     transform: rotate(135deg);
    }
    50% {
     transform: rotate(65deg);
    }
    100%{
     transform: rotate(135deg);
    }
}
@keyframes show-4 {
    0% {
     transform: rotate(135deg);
    }
    50% {
     transform: rotate(85deg);
    }
    100%{
     transform: rotate(135deg);
    }
}
@keyframes show-5 {
    0% {
     transform: rotate(135deg);
    }
    50% {
     transform: rotate(105deg);
    }
    100%{
     transform: rotate(135deg);
    }
}
@keyframes show-6 {
    0% {
     transform: rotate(135deg);
    }
    50% {
     transform: rotate(165deg);
    }
    100%{
     transform: rotate(135deg);
    }
}
@keyframes show-7 {
    0% {
     transform: rotate(135deg);
    }
    50% {
     transform: rotate(185deg);
    }
    100%{
     transform: rotate(135deg);
    }
}
@keyframes show-8 {
    0% {
     transform: rotate(135deg);
    }
    50% {
     transform: rotate(205deg);
    }
    100%{
     transform: rotate(135deg);
    }
}  

@keyframes show-9 {
    0% {
     transform: rotate(135deg);
    }
    50% {
     transform: rotate(225deg);
    }
    100%{
     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;
}

以上就是CSS3实现莲花绽放得动画效果的详细内容,更多关于CSS3 莲花绽放动画的资料请关注三水点靠木其它相关文章!

HTML / CSS 相关文章推荐
利用CSS3的flexbox实现水平垂直居中与三列等高布局
Sep 12 HTML / CSS
css3背景_动力节点Java学院整理
Jul 11 HTML / CSS
纯css3实现的动画按钮的实例教程
Nov 17 HTML / CSS
CSS3中使用RGBA设置透明度的示例
Aug 04 HTML / CSS
简单总结CSS3中视窗单位Viewport的常见用法
Feb 04 HTML / CSS
css3实现文字扫光渐变动画效果的示例
Nov 07 HTML / CSS
HTML5中实现拖放效果无须借助javascript
Dec 26 HTML / CSS
详解html2canvas截图不能截取圆角图片的解决方案
Jan 30 HTML / CSS
Html5写一个简单的俄罗斯方块小游戏
Dec 03 HTML / CSS
amazeui 验证按钮扩展的实现
Aug 21 HTML / CSS
CSS 实现Chrome标签栏的技巧
Aug 04 HTML / CSS
关于CSS自定义属性与前端页面的主题切换问题
Mar 21 HTML / CSS
CSS3制作圆形滚动进度条动画的示例
Nov 05 #HTML / CSS
CSS实现进度条和订单进度条的示例
Nov 05 #HTML / CSS
一篇文章带你学习CSS3图片边框
Nov 04 #HTML / CSS
CSS3实现时间轴特效
Nov 02 #HTML / CSS
CSS3制作皮卡丘动画壁纸的示例
Nov 02 #HTML / CSS
详解background属性的8个属性值(面试题)
Nov 02 #HTML / CSS
css3实现二维码扫描特效的示例
Oct 29 #HTML / CSS
You might like
我的论坛源代码(八)
2006/10/09 PHP
PHP5.4中json_encode中文转码的变化小结
2013/01/30 PHP
分享PHP函数实现数字与文字分页代码
2015/07/28 PHP
PHP中函数gzuncompress无法使用的解决方法
2017/03/02 PHP
PHP设计模式之装饰器模式定义与用法详解
2018/04/02 PHP
Jquery在IE7下无法使用 $.ajax解决方法
2009/11/11 Javascript
JQuery小知识
2010/10/15 Javascript
js 判断计算字符串长度/判断空的简单方法
2013/08/05 Javascript
深入剖析JavaScript中的函数currying柯里化
2016/04/29 Javascript
第六篇Bootstrap表格样式介绍
2016/06/21 Javascript
JavaScript简单计算人的年龄示例
2017/04/15 Javascript
jQuery层级选择器_动力节点节点Java学院整理
2017/07/04 jQuery
Three.js如何用轨迹球插件(trackball)增加对模型的交互功能详解
2017/09/25 Javascript
bootstrap+jquery项目引入文件报错的解决方法
2018/01/22 jQuery
详解微信小程序实现仿微信聊天界面(各种细节处理)
2019/02/17 Javascript
40行代码把Vue3的响应式集成进React做状态管理
2020/05/20 Javascript
javascript canvas时钟模拟器
2020/07/13 Javascript
JS绘图Flot如何实现动态可刷新曲线图
2020/10/16 Javascript
Python时区设置方法与pytz查询时区教程
2013/11/27 Python
Python+tkinter使用80行代码实现一个计算器实例
2018/01/16 Python
Python文件如何引入?详解引入Python文件步骤
2018/12/10 Python
用Python逐行分析文件方法
2019/01/28 Python
windows下numpy下载与安装图文教程
2019/04/02 Python
python GUI库图形界面开发之PyQt5布局控件QVBoxLayout详细使用方法与实例
2020/03/06 Python
深入理解Python 多线程
2020/06/16 Python
python 常见的排序算法实现汇总
2020/08/21 Python
如何用python实现一个HTTP连接池
2021/01/14 Python
巴西服装和鞋子购物网站:Marisa
2018/10/25 全球购物
自我评价如何写好?
2014/01/05 职场文书
舞蹈毕业生的自我评价
2014/03/05 职场文书
电子专业自荐信
2014/07/01 职场文书
学校副校长四风对照检查材料整改措施
2014/09/25 职场文书
初中生300字旷课检讨书
2014/11/19 职场文书
导游词之青城山景区
2019/09/27 职场文书
三年级作文之小小梦想
2019/12/06 职场文书
如何使用python包中的sched事件调度器
2022/04/30 Python