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实现炫酷的飞机起飞动画
Sep 17 HTML / CSS
让IE可以变相支持CSS3选择器
Jan 21 HTML / CSS
css3制作动态进度条以及附加jQuery百分比数字显示
Dec 13 HTML / CSS
用CSS3写的模仿iPhone中的返回按钮
Apr 04 HTML / CSS
CSS+jQuery+PHP+MySQL实现的在线答题功能
Apr 25 HTML / CSS
利用CSS3实现的文字定时向上滚动
Aug 29 HTML / CSS
利用css3画个同心圆示例代码
Jul 03 HTML / CSS
HTML5中语义化 b 和 i 标签
Oct 17 HTML / CSS
HTML5 Canvas实现图片缩放、翻转、颜色渐变的代码示例
Feb 28 HTML / CSS
利用canvas实现图片压缩的示例代码
Jul 17 HTML / CSS
HTML5超文本标记语言的实现方法
Sep 24 HTML / CSS
关于CSS浮动与取消浮动的问题
Jun 28 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
全国FM电台频率大全 - 18 湖南省
2020/03/11 无线电
BBS(php &amp; mysql)完整版(三)
2006/10/09 PHP
解析用PHP实现var_export的详细介绍
2013/06/20 PHP
ubuntu12.04使用c编写php扩展模块教程分享
2013/12/25 PHP
php实现 master-worker 守护多进程模式的实例代码
2019/07/20 PHP
让iframe框架网页在任何浏览器下自动伸缩
2006/08/18 Javascript
日期 时间js控件
2009/05/07 Javascript
Javascript实现滑块滑动改变值的实现代码
2013/04/12 Javascript
JQuery设置和去除disabled属性的5种方法总结
2013/05/16 Javascript
变量声明时命名与变量作为对象属性时命名的区别解析
2013/12/06 Javascript
JavaScript实现在页面间传值的方法
2015/04/07 Javascript
JS简单实现城市二级联动选择插件的方法
2015/08/19 Javascript
基于jQuery实现点击最后一行实现行自增效果的表格
2016/01/12 Javascript
javascript显示倒计时控制按钮的简单实现
2016/06/07 Javascript
javascript动画之模拟拖拽效果篇
2016/09/26 Javascript
JS获取IE版本号与HTML设置IE文档模式的方法
2016/10/09 Javascript
React-Native使用Mobx实现购物车功能
2017/09/14 Javascript
jQuery使用zTree插件实现可拖拽的树示例
2017/09/23 jQuery
vue项目中使用rem,在入口文件添加内容操作
2020/11/11 Javascript
[41:17]VG vs Optic 2018国际邀请赛小组赛BO2 第二场 8.19
2018/08/21 DOTA
[49:21]TNC vs VG 2019DOTA2国际邀请赛淘汰赛 胜者组赛BO3 第三场 8.20.mp4
2019/08/22 DOTA
[39:46]完美世界DOTA2联赛PWL S2 LBZS vs Rebirth 第二场 11.25
2020/11/25 DOTA
python TCP Socket的粘包和分包的处理详解
2018/02/09 Python
PyQt5实现下载进度条效果
2018/04/19 Python
python 上下文管理器及自定义原理解析
2019/11/19 Python
pycharm中import呈现灰色原因的解决方法
2020/03/04 Python
解决Django no such table: django_session的问题
2020/04/07 Python
简述synchronized和java.util.concurrent.locks.Lock的异同
2014/12/08 面试题
九年级体育教学反思
2014/01/23 职场文书
《冬阳童年骆驼队》教学反思
2014/04/15 职场文书
园林系毕业生求职信
2014/06/23 职场文书
先进事迹演讲稿
2014/09/01 职场文书
会计学习心得体会
2014/09/09 职场文书
大学生党员批评与自我批评
2014/09/28 职场文书
2015年党员发展工作总结
2015/05/13 职场文书
先进个人主要事迹范文
2015/11/04 职场文书