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和HTML5的支持状况
Oct 31 HTML / CSS
利用CSS3的checked伪类实现OL的隐藏显示的方法
Dec 18 HTML / CSS
CSS3盒子模型详解
Apr 24 HTML / CSS
CSS3 实用技巧:实现黑白图像效果示例代码
Jul 11 HTML / CSS
纯CSS3+DIV实现小三角形边框效果的示例代码
Aug 03 HTML / CSS
HTML5 Canvas实现文本对齐的方法总结
Mar 24 HTML / CSS
详解HTML5新增标签
Nov 27 HTML / CSS
canvas学习笔记之绘制简单路径
Jan 28 HTML / CSS
HTML5高仿微信聊天、微信聊天表情|对话框|编辑器功能
Apr 23 HTML / CSS
HTML5之消息通知的使用(Web Notification)
Oct 30 HTML / CSS
使用canvas生成含有微信头像的邀请海报没有微信头像问题
Oct 29 HTML / CSS
HTML5手指下滑弹出负一屏阻止移动端浏览器内置下拉刷新功能的实现代码
Apr 10 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 Try Catch异常测试
2009/03/01 PHP
phpMyAdmin链接MySql错误 个人解决方案
2009/12/28 PHP
discuz authcode 经典php加密解密函数解析
2020/07/12 PHP
php操作SVN版本服务器类代码
2011/11/27 PHP
php实现rc4加密算法代码
2012/04/25 PHP
采用header定义为文件然后readfile下载(隐藏下载地址)
2014/01/31 PHP
php校验表单检测字段是否为空的方法
2015/03/20 PHP
详解WordPress中用于合成数组的wp_parse_args()函数
2015/12/18 PHP
Symfony2在Nginx下的配置方法图文教程
2016/02/04 PHP
关于JavaScript定义类和对象的几种方式
2010/11/09 Javascript
jquery $.ajax相关用法分享
2012/03/16 Javascript
JavaScript实现网页上的浮动广告的简单方法
2013/06/14 Javascript
jQuery 写的简单打字游戏可以提示正确和错误的次数
2014/07/01 Javascript
Javascript基础教程之比较操作符
2015/01/18 Javascript
jQuery实现当前页面标签高亮显示的方法
2015/03/10 Javascript
JavaScript中setUTCFullYear()方法的使用简介
2015/06/12 Javascript
分享Javascript实用方法二
2015/12/13 Javascript
jquery自定义右键菜单、全选、不连续选择
2016/03/01 Javascript
AngularJs 弹出模态框(model)
2016/04/07 Javascript
Bootstrap Metronic完全响应式管理模板学习笔记
2016/07/08 Javascript
w3c编程挑战_初级脚本算法实战篇
2017/06/23 Javascript
详解基于vue的服务端渲染框架NUXT
2018/06/20 Javascript
构建一个JavaScript插件系统
2020/10/20 Javascript
Python基于smtplib实现异步发送邮件服务
2015/05/28 Python
使用Python中的tkinter模块作图的方法
2017/02/07 Python
pycharm 实现显示project 选项卡的方法
2019/01/17 Python
使用python绘制二元函数图像的实例
2019/02/12 Python
pytorch多GPU并行运算的实现
2019/09/27 Python
python不到50行代码完成了多张excel合并的实现示例
2020/05/28 Python
ProBikeKit英国:在线公路自行车之家
2017/02/10 全球购物
会计专业毕业生自荐书
2014/06/25 职场文书
销售代理协议书
2014/09/30 职场文书
护理医院见习报告
2014/11/03 职场文书
装修公司管理制度
2015/08/05 职场文书
2016小学教师读书心得体会
2016/01/13 职场文书
创业计划书之电动车企业
2019/10/11 职场文书