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制作日历实现代码
Jan 21 HTML / CSS
css3弹性盒模型实例介绍
May 27 HTML / CSS
HTML5+CSS3实例 :canvas 模拟实现电子彩票刮刮乐代码
Dec 30 HTML / CSS
详解CSS3 rem(设置字体大小) 教程
Nov 21 HTML / CSS
html5新特性与用法大全
Sep 13 HTML / CSS
HTML5中的Scoped属性使用实例
Apr 23 HTML / CSS
Html5+JS实现手机摇一摇功能
Apr 24 HTML / CSS
HTML5+css3:3D旋转木马效果相册
Jan 03 HTML / CSS
HTML里显示pdf、word、xls、ppt的方法示例
Apr 14 HTML / CSS
html+css合并表格边框的示例代码
Mar 31 HTML / CSS
使用canvas仿Echarts实现金字塔图的实例代码
Nov 11 HTML / CSS
html原生table实现合并单元格以及合并表头的示例代码
May 07 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
西德产收音机
2021/03/01 无线电
PHP实现将科学计数法转换为原始数字字符串的方法
2014/12/16 PHP
php使用Swoole实现毫秒级定时任务的方法
2020/09/04 PHP
让firefox支持IE的一些方法的javascript扩展函数代码
2010/01/02 Javascript
JS控件的生命周期介绍
2012/10/22 Javascript
鼠标滚轮控制网页横向移动实现思路
2013/03/22 Javascript
jQuery过滤选择器详解
2015/01/13 Javascript
使用JQuery FancyBox插件实现图片展示特效
2015/11/16 Javascript
浅析jQuery Ajax请求参数和返回数据的处理
2016/02/24 Javascript
EasyUi中的Combogrid 实现分页和动态搜索远程数据
2016/04/01 Javascript
遍历js中对象的属性和值的实例
2016/11/21 Javascript
jQuery实现百度登录框的动态切换效果
2017/04/21 jQuery
详解AngularJS1.x学习directive 中‘&amp; ’‘=’ ‘@’符号的区别使用
2017/08/23 Javascript
jQuery Validate插件ajax方式验证输入值的实例
2017/12/21 jQuery
js限制input只能输入有效的数字(第一个不能是小数点)
2018/09/28 Javascript
JavaScript文本特效实例小结【3个示例】
2018/12/22 Javascript
JS尾递归的实现方法及代码优化技巧
2019/01/19 Javascript
js尾调用优化的实现
2019/05/23 Javascript
vue 全局封装loading加载教程(全局监听)
2020/11/05 Javascript
PyQt5每天必学之滑块控件QSlider
2018/04/20 Python
Python/ArcPy遍历指定目录中的MDB文件方法
2018/10/27 Python
python自动化工具之pywinauto实例详解
2019/08/26 Python
opencv3/C++实现视频背景去除建模(BSM)
2019/12/11 Python
使用python处理题库表格并转化为word形式的实现
2020/04/14 Python
Python pip安装模块提示错误解决方案
2020/05/22 Python
python的launcher用法知识点总结
2020/08/07 Python
python 利用zmail库发送邮件
2020/09/11 Python
利用css3-animation实现逐帧动画效果
2016/03/10 HTML / CSS
详解如何使用rem或viewport进行移动端适配
2020/08/14 HTML / CSS
美国校服网上商店:French Toast
2019/10/08 全球购物
Eclipse面试题
2014/03/22 面试题
广州一家公司的.NET面试题
2016/06/11 面试题
一年级数学教学反思
2014/02/01 职场文书
2015年新教师工作总结
2015/04/28 职场文书
Nginx源码编译安装过程记录
2021/11/17 Servers
Win10玩csgo闪退如何解决?Win10玩csgo闪退的解决方法
2022/07/23 数码科技