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 box-sizing属性使用参考指南
Jan 08 HTML / CSS
纯CSS实现的大小渐变、渐远效果
Apr 15 HTML / CSS
一款基于css3的动画按钮代码教程
Nov 23 HTML / CSS
利用 CSS3 实现的无缝轮播功能代码
Sep 25 HTML / CSS
CSS3关于z-index不生效问题的解决
Feb 19 HTML / CSS
CSS3 filter(滤镜)实现网页灰色或者黑色模式的示例代码
Feb 24 HTML / CSS
HTML5 Canvas draw方法制作动画效果示例
Jul 11 HTML / CSS
html5本地存储之localstorage 、本地数据库、sessionStorage简单使用示例
May 08 HTML / CSS
SVG实现多彩圆环倒计时效果的示例代码
Nov 21 HTML / CSS
微信小程序“圣诞帽”的实现思路详解
Dec 28 HTML / CSS
position:sticky 粘性定位的几种巧妙应用详解
Apr 24 HTML / CSS
如何使用 resize 实现图片切换预览功能
Aug 23 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
全国中波电台频率表
2020/03/11 无线电
一篇入门的php Class 文章
2007/04/04 PHP
php加速器eAccelerator的配置参数、API详解
2014/05/05 PHP
通过js为元素添加多项样式,浏览器全兼容写法
2014/08/30 Javascript
使用JavaScript链式编程实现模拟Jquery函数
2014/12/21 Javascript
JavaScript实现跨浏览器的添加及删除事件绑定函数实例
2015/08/04 Javascript
Jquery1.9.1源码分析系列(十五)动画处理之外篇
2015/12/04 Javascript
教你5分钟学会用requirejs(必看篇)
2017/07/25 Javascript
canvas+gif.js打造自己的数字雨头像的示例代码
2017/10/26 Javascript
Vue 兄弟组件通信的方法(不使用Vuex)
2017/10/26 Javascript
在vue项目中正确使用iconfont的方法
2018/09/28 Javascript
微信小程序实现登录遮罩效果
2018/11/01 Javascript
JS求1到任意数之间的所有质数的方法详解
2019/05/20 Javascript
微信小程序indexOf的替换方法(推荐)
2020/01/14 Javascript
vue实现匀速轮播效果
2020/06/29 Javascript
Python常用模块用法分析
2014/09/08 Python
python监控网站运行异常并发送邮件的方法
2015/03/13 Python
python创建列表和向列表添加元素的实现方法
2017/12/25 Python
python事件驱动event实现详解
2018/11/21 Python
对python requests发送json格式数据的实例详解
2018/12/19 Python
nohup后台启动Python脚本,log不刷新的解决方法
2019/01/14 Python
缅甸网上购物:Shop.com.mm
2017/12/05 全球购物
Linux如何为某个操作添加别名
2013/03/01 面试题
如何写出好的Java代码
2014/04/25 面试题
大学生毕业自我评价范文分享
2013/11/07 职场文书
医药销售求职信范文
2014/02/01 职场文书
大学活动总结格式
2014/04/29 职场文书
拓展训练激励口号
2014/06/17 职场文书
2014年接待工作总结
2014/11/26 职场文书
三孔导游词
2015/02/05 职场文书
研究生给导师的自荐信
2015/03/06 职场文书
爱国主义教育基地观后感
2015/06/18 职场文书
七年级作文之关于奶奶
2019/10/29 职场文书
Java8中接口的新特性使用指南
2021/11/01 Java/Android
 Python 中 logging 模块使用详情
2022/03/03 Python
一行Python命令实现批量加水印
2022/04/07 Python