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对图片照片进行边缘模糊处理的实现
Aug 08 HTML / CSS
HTML5和CSS3让网页设计提升到下一个高度
Aug 14 HTML / CSS
不同浏览器对CSS3和HTML5的支持状况
Oct 31 HTML / CSS
css3的transition属性详解
Dec 15 HTML / CSS
非常震撼的纯CSS3人物行走动画
Feb 24 HTML / CSS
CSS的background属性及CSS3的背景图片设置总结
Jun 13 HTML / CSS
css3的动画特效之动画序列(animation)
Dec 22 HTML / CSS
css3 矩阵的使用详解
Mar 20 HTML / CSS
HTML5的语法变化介绍
Aug 13 HTML / CSS
html5教程调用绘图api画简单的圆形代码分享
Dec 04 HTML / CSS
HTML5实现的图片无限加载的瀑布流效果另带边框圆角阴影
Mar 07 HTML / CSS
HTML5 input新增type属性color颜色拾取器的实例代码
Aug 27 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
php预定义常量
2006/12/25 PHP
Phpbean路由转发的php代码
2008/01/10 PHP
PHP mb_convert_encoding 获取字符串编码类型实现代码
2009/04/26 PHP
全面解析PHP验证码的实现原理 附php验证码小案例
2016/08/17 PHP
thinkPHP模板中for循环与switch语句用法示例
2016/11/30 PHP
IE iframe的onload方法分析小结
2010/01/07 Javascript
javascript检测对象中是否存在某个属性判断方法小结
2013/05/19 Javascript
javascript 构造函数方式定义对象
2015/01/02 Javascript
浅谈jQuery中height与width
2015/07/06 Javascript
微信企业号开发之微信考勤百度地图定位
2015/09/11 Javascript
JS组件Bootstrap导航条使用方法详解
2016/04/29 Javascript
jQuery实现背景弹性滚动的导航效果
2016/06/01 Javascript
最丑的时钟效果!js canvas时钟制作方法
2016/08/15 Javascript
Node.js利用debug模块打印出调试日志的方法
2017/04/25 Javascript
vuejs手把手教你写一个完整的购物车实例代码
2017/07/06 Javascript
vue.js $refs和$emit 父子组件交互的方法
2017/12/20 Javascript
vue动态配置模板 'component is'代码
2019/07/04 Javascript
vue使用swiper.js重叠轮播组建样式
2019/11/14 Javascript
Vue如何将页面导出成PDF文件
2020/08/17 Javascript
[10:34]DOTA2上海特级锦标赛全纪录
2016/03/25 DOTA
详解Ubuntu16.04安装Python3.7及其pip3并切换为默认版本
2019/02/25 Python
python爬虫模拟浏览器的两种方法实例分析
2019/12/09 Python
python 用 xlwings 库 生成图表的操作方法
2019/12/22 Python
python 输入字符串生成所有有效的IP地址(LeetCode 93号题)
2020/10/15 Python
浅谈基于Canvas的手绘风格图形库Rough.js
2018/03/19 HTML / CSS
京东港澳售:京东直邮港澳台
2018/01/31 全球购物
Bed Bath & Beyond加拿大官网:购买床上用品、浴巾、厨房电器等
2019/10/04 全球购物
运动会方阵解说词
2014/02/12 职场文书
个人借款担保书
2014/04/02 职场文书
2014各大专业毕业生自我评价
2014/09/17 职场文书
村党的群众路线教育实践活动工作总结
2014/10/25 职场文书
邀请函模板
2015/02/02 职场文书
对象析构函数__del__在Python中何时使用
2022/03/22 Python
Android Flutter实现3D动画效果示例详解
2022/04/07 Java/Android
golang生成并解析JSON
2022/04/14 Golang
Go gorilla securecookie库的安装使用详解
2022/08/14 Golang