CSS3 实现的火焰动画


Posted in HTML / CSS onDecember 07, 2020

实现效果

CSS3 实现的火焰动画

实现代码

html

<div class="container">
  <div class="red flame"></div>
  <div class="orange flame"></div>
  <div class="yellow flame"></div>
  <div class="white flame"></div>
  <div class="blue circle"></div>
  <div class="black circle"></div>
</div>

CSS3

body{
  background:black;
}

.container{
  margin:80px auto;
  width: 60px;
  height: 60px;
  position:relative;
  transform-origin:center bottom;
  animation-name: flicker;
  animation-duration:3ms;
  animation-delay:200ms;
  animation-timing-function: ease-in;
  animation-iteration-count: infinite;
  animation-direction: alternate;
}

.flame{
  bottom:0;
  position:absolute;
  border-bottom-right-radius: 50%;
  border-bottom-left-radius: 50%;
  border-top-left-radius: 50%;
  transform:rotate(-45deg) scale(1.5,1.5);
}

.yellow{
  left:15px; 
  width: 30px;
  height: 30px;
  background:gold;
  box-shadow: 0px 0px 9px 4px gold;
}

.orange{
  left:10px; 
  width: 40px;
  height: 40px;
  background:orange;
  box-shadow: 0px 0px 9px 4px orange;
}

.red{
  left:5px;
  width: 50px;
  height: 50px;
  background:OrangeRed;
  box-shadow: 0px 0px 5px 4px OrangeRed;
}

.white{
  left:15px; 
  bottom:-4px;
  width: 30px;
  height: 30px;
  background:white;
  box-shadow: 0px 0px 9px 4px white;
}

.circle{
  border-radius: 50%;
  position:absolute;  
}

.blue{
  width: 10px;
  height: 10px;
  left:25px;
  bottom:-25px; 
  background: SlateBlue;
  box-shadow: 0px 0px 15px 10px SlateBlue;
}

.black{
  width: 40px;
  height: 40px;
  left:10px;
  bottom:-60px;  
  background: black;
  box-shadow: 0px 0px 15px 10px black;
}

@keyframes flicker{
  0%   {transform: rotate(-1deg);}
  20%  {transform: rotate(1deg);}
  40%  {transform: rotate(-1deg);}
  60%  {transform: rotate(1deg) scaleY(1.04);}
  80%  {transform: rotate(-2deg) scaleY(0.92);}
  100% {transform: rotate(1deg);}
}

以上就是CSS3 实现的火焰动画的详细内容,更多关于CSS3 火焰动画的资料请关注三水点靠木其它相关文章!

HTML / CSS 相关文章推荐
纯css3显示隐藏一个div特效的具体实现
Feb 10 HTML / CSS
详解CSS3中字体平滑处理和抗锯齿渲染
Mar 29 HTML / CSS
基于CSS3 animation动画属性实现轮播图效果
Sep 12 HTML / CSS
css3 pointer-events 介绍详解
Sep 18 HTML / CSS
CSS3新增布局之: flex详解
Jun 18 HTML / CSS
css3利用transform变形结合事件完成扇形导航
Oct 26 HTML / CSS
HTML5地理定位与第三方工具百度地图的应用
Nov 17 HTML / CSS
实例教程 利用html5和css3打造一款创意404页面
Oct 20 HTML / CSS
HTML5 LocalStorage 本地存储详细概括(多图)
Aug 18 HTML / CSS
canvas实现扭蛋机动画效果的示例代码
Oct 17 HTML / CSS
AmazeUI 评论列表的实现示例
Aug 13 HTML / CSS
css3 利用transform-origin 实现圆点分布在大圆上布局及旋转特效
Apr 29 HTML / CSS
CSS3 实现的加载动画
Dec 07 #HTML / CSS
CSS3实现的渐变幻灯片效果
Dec 07 #HTML / CSS
详解CSS3+JS完美实现放大镜模式
Dec 03 #HTML / CSS
css3中仿放大镜效果的几种方式原理解析
Dec 03 #HTML / CSS
CSS3 实现飘动的云朵动画
Dec 01 #HTML / CSS
CSS3 filter(滤镜)实现网页灰色或者黑色模式的代码
Nov 30 #HTML / CSS
CSS3 实现时间轴动画
Nov 25 #HTML / CSS
You might like
PHP二维关联数组的遍历方式(实例讲解)
2017/10/18 PHP
php获取手机端的号码以及ip地址实例代码
2018/09/12 PHP
append和appendTo的区别以及appendChild用法
2013/12/24 Javascript
javascript匿名函数实例分析
2014/11/18 Javascript
AngularJS基础 ng-list 指令详解及示例代码
2016/08/02 Javascript
半个小时学json(json传递示例)
2016/12/25 Javascript
JS操作input标签属性checkbox全选的实现代码
2017/03/02 Javascript
详解js几个绕不开的事件兼容写法
2017/08/30 Javascript
详解使用Visual Studio Code对Node.js进行断点调试
2017/09/14 Javascript
重新认识vue之事件阻止冒泡的实现
2018/08/02 Javascript
vue项目动态设置页面title及是否缓存页面的问题
2018/11/08 Javascript
NodeJS实现同步的方法
2019/03/02 NodeJs
python实现360的字符显示界面
2014/02/21 Python
Python装饰器使用示例及实际应用例子
2015/03/06 Python
python实现linux下使用xcopy的方法
2015/06/28 Python
python中字符串变二维数组的实例讲解
2018/04/03 Python
python 按不同维度求和,最值,均值的实例
2018/06/28 Python
Python将文本去空格并保存到txt文件中的实例
2018/07/24 Python
python使用webdriver爬取微信公众号
2018/08/31 Python
对pandas里的loc并列条件索引的实例讲解
2018/11/15 Python
PyQt打开保存对话框的方法和使用详解
2019/02/27 Python
Django实现单用户登录的方法示例
2019/03/28 Python
Python3安装Pillow与PIL的方法
2019/04/03 Python
Python中函数的基本定义与调用及内置函数详解
2019/05/13 Python
python中bs4.BeautifulSoup的基本用法
2019/07/27 Python
Python大数据之使用lxml库解析html网页文件示例
2019/11/16 Python
PyQt5连接MySQL及QMYSQL driver not loaded错误解决
2020/04/29 Python
python 常见的排序算法实现汇总
2020/08/21 Python
纯CSS3制作的简洁蓝白风格的登录模板(非IE效果更好)
2013/08/11 HTML / CSS
圣诞节红领巾广播稿
2014/02/03 职场文书
毕业生求职自荐书范文
2014/03/27 职场文书
优秀党务工作者事迹材料
2014/05/07 职场文书
欢迎标语大全
2014/06/21 职场文书
关于环保的宣传稿
2015/07/23 职场文书
送给教师们,到底该如何写好教学反思?
2019/07/02 职场文书
使用JS前端技术实现静态图片局部流动效果
2022/08/05 Javascript