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 相关文章推荐
全面总结使用CSS实现水平垂直居中效果的方法
Mar 10 HTML / CSS
CSS3 2D模拟实现摩天轮旋转效果
Nov 16 HTML / CSS
详解HTML5中垂直上下居中的解决方案
Dec 20 HTML / CSS
用HTML5 实现橡皮擦的涂抹效果的教程
May 11 HTML / CSS
利用HTML5 Canvas API绘制矩形的超级攻略
Mar 21 HTML / CSS
canvas之自定义头像功能实现代码示例
Sep 29 HTML / CSS
浅谈HTML5中dialog元素尝鲜
Oct 15 HTML / CSS
AmazeUI 加载进度条的实现示例
Aug 20 HTML / CSS
HTML5中input输入框默认提示文字向左向右移动的示例代码
Sep 10 HTML / CSS
简洁自适应404页面HTML好看的404源码
Dec 16 HTML / CSS
如何使用 resize 实现图片切换预览功能
Aug 23 HTML / CSS
如何用H5实现好玩的2048小游戏
Jul 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
PHP 截取字符串专题集合
2010/08/19 PHP
php采集中国代理服务器网的方法
2015/06/16 PHP
PHP实现的数独求解问题示例
2017/04/18 PHP
自己写的兼容ie和ff的在线文本编辑器类似ewebeditor
2012/12/12 Javascript
JavaScript indexOf方法入门实例(计算指定字符在字符串中首次出现的位置)
2014/10/17 Javascript
Bootstrap每天必学之导航
2015/11/26 Javascript
整理Javascript基础入门学习笔记
2015/11/29 Javascript
Nodejs全局安装和本地安装的不同之处
2016/07/04 NodeJs
JS 动态判断PC和手机浏览器实现代码
2016/09/21 Javascript
js设置文字颜色的方法示例
2016/12/30 Javascript
基于JS实现仿百度百家主页的轮播图效果
2017/03/06 Javascript
vue后台管理之动态加载路由的方法
2018/08/13 Javascript
JavaScript fetch接口案例解析
2018/08/30 Javascript
微信小程序 导入图标实现过程详解
2019/10/11 Javascript
Vue中用JSON实现刷新界面不影响倒计时
2020/10/26 Javascript
微信小程序实现单个或多个倒计时功能
2020/11/01 Javascript
使用jquery实现轮播图效果
2021/01/02 jQuery
跟老齐学Python之有容乃大的list(4)
2014/09/28 Python
python实现每次处理一个字符的三种方法
2014/10/09 Python
python中实现控制小数点位数的方法
2019/01/24 Python
Python 判断图像是否读取成功的方法
2019/01/26 Python
python TK库简单应用(实时显示子进程输出)
2019/10/29 Python
使用PyTorch训练一个图像分类器实例
2020/01/08 Python
基于Django OneToOneField和ForeignKey的区别详解
2020/03/30 Python
Python OrderedDict字典排序方法详解
2020/05/21 Python
Selenium 安装和简单使用的实现
2020/12/04 Python
西部世纪.net笔试题面试题
2014/04/03 面试题
《青山处处埋忠骨》教学反思
2014/04/22 职场文书
小学生演讲稿大全
2014/04/25 职场文书
2014年高中生自我评价范文
2014/09/26 职场文书
阿凡达观后感
2015/06/10 职场文书
《乘法分配律》教学反思
2016/02/24 职场文书
PHP基本语法
2021/03/31 PHP
Django实现在线无水印抖音视频下载(附源码及地址)
2021/05/06 Python
MySQL 数据 data 基本操作
2022/05/04 MySQL
基于CSS制作创意端午节专属加载特效
2022/06/01 HTML / CSS