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 相关文章推荐
使用Filters滤镜弥补CSS3的跨浏览器问题以及兼容低版本IE
Jan 23 HTML / CSS
CSS3制作ajax loader icon实现思路及代码
Aug 25 HTML / CSS
使用css3背景渐变中的透明度来设置不同颜色的背景渐变
Mar 31 HTML / CSS
纯CSS3实现的阴影效果
Dec 24 HTML / CSS
CSS3中的Media Queries学习笔记
May 23 HTML / CSS
CSS3实现翘边的阴影效果的代码示例
Jun 13 HTML / CSS
2分钟教你实现环形/扇形菜单(基础版)
Jan 15 HTML / CSS
css3实现二维码扫描特效的示例
Oct 29 HTML / CSS
HTML5组件Canvas实现图像灰度化(步骤+实例效果)
Apr 22 HTML / CSS
LocalStorage记住用户和密码功能
Jul 24 HTML / CSS
CSS布局之浮动(float)和定位(position)属性的区别
Sep 25 HTML / CSS
Li list-style-image 图片垂直居中实现方法
May 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
php连接mysql数据库代码
2009/03/10 PHP
php学习笔记 面向对象中[接口]与[多态性]的应用
2011/06/16 PHP
PHP OPP机制和模式简介(抽象类、接口和契约式编程)
2014/06/09 PHP
Zend Framework实现留言本分页功能(附demo源码下载)
2016/03/22 PHP
PHP的时间戳与具体时间转化的简单实现
2016/06/13 PHP
PHP有序表查找之插值查找算法示例
2018/02/10 PHP
PHP扩展mcrypt实现的AES加密功能示例
2019/01/29 PHP
脚本吧 - 幻宇工作室用到js,超强推荐expand.js
2006/12/23 Javascript
js 实现无缝滚动 兼容IE和FF
2009/07/15 Javascript
javascript获得服务器端控件的ID的实现代码
2011/12/28 Javascript
使用POST方式弹出窗口的两种方法示例介绍
2014/01/29 Javascript
js的touch事件的实际引用
2014/10/13 Javascript
Javascript节点关系实例分析
2015/05/15 Javascript
将页面table内容与样式另存成excel文件的方法
2015/08/05 Javascript
Bootstrap3使用typeahead插件实现自动补全功能
2016/07/07 Javascript
JS实现的幻灯片切换显示效果
2016/09/07 Javascript
validform表单验证的实现方法
2019/03/08 Javascript
小程序云函数调用API接口的方法
2019/05/17 Javascript
Vuex modules模式下mapState/mapMutations的操作实例
2019/10/17 Javascript
[46:20]TFT vs Secret Supermajor小组赛C组 BO3 第二场 6.3
2018/06/04 DOTA
Python字符串格式化的方法(两种)
2017/09/19 Python
Python实现在tkinter中使用matplotlib绘制图形的方法示例
2018/01/18 Python
日本高端护肤品牌:Tatcha
2016/08/29 全球购物
FILA斐乐中国官方商城:意大利运动品牌
2017/01/25 全球购物
服务中心夜班服务员岗位职责
2013/11/27 职场文书
小松树教学反思
2014/02/11 职场文书
年终总结会主持词
2014/03/25 职场文书
机关办公室岗位职责
2014/04/16 职场文书
低碳日宣传活动总结
2014/07/09 职场文书
运动会演讲稿300字
2014/08/25 职场文书
中国文明网向国旗敬礼寄语大全
2014/09/27 职场文书
校园开放日新闻稿
2015/07/17 职场文书
2015元旦感言
2015/12/09 职场文书
2016年禁毒宣传活动总结
2016/04/05 职场文书
基于Nginx实现限制某IP短时间访问次数
2021/03/31 Servers
python 实现两个变量值进行交换的n种操作
2021/06/02 Python