<!DOCTYPE html>

<html>

<head lang="en">

    <meta charset="UTF-8">

    <title></title>

    <link rel="stylesheet" href="flame.css"/>

<style>

/*清除边距*/

body, div {

    margin: 0;

    padding: 0;

}

/*设置背景色*/

body {

    background: #000;

}

.flame {

    width: 300px;

    height: 300px;

    margin: 200px auto;

    /*background: #FFFFFF;*/

    position: relative;

}

/*火焰效果，用简单div实现*/

.flame div:nth-child(-n+6) {

    width: 0px;

    height: 0px;

    background: #D81818;

    border-radius: 20%;

    transform: rotateZ(45deg);

    position: absolute;

    left: 45%;

    top: 60%;

}

.flame div:nth-child(1) {

    animation: gun 6s linear Infinite;

}

.flame div:nth-child(2) {

    animation: gun1 6s linear Infinite;

    animation-delay: 1s;

}

.flame div:nth-child(3) {

    animation: gun 6s linear Infinite;

    animation-delay: 2s;

}

.flame div:nth-child(4) {

    animation: gun1 6s linear Infinite;

    animation-delay: 3s;

}

.flame div:nth-child(5) {

    animation: gun 6s linear Infinite;

    animation-delay:4s;

}

.flame div:nth-child(6) {

    animation: gun1 6s linear Infinite;

    animation-delay:5s;

}

/*添加伪类元素实现火花效果*/

.flame1::before {

    content: "";

    width: 0px;

    height: 0px;

    background: #FFC001;

    border-radius: 50%;

    transform: rotateZ(45deg);

    position: absolute;

    left: 45%;

    top: 60%;

    animation: gun2 4s ease-in Infinite;

    animation-delay: 1s;

    background: radial-gradient(

            5px at center,

            red,

            #FFC001

    )

}

.flame3::before {

    content: "";

    width: 0px;

    height: 0px;

    background: #FFC001;

    border-radius: 50%;

    transform: rotateZ(45deg);

    position: absolute;

    left: 45%;

    top: 60%;

    animation: gun2 4s ease-in Infinite;

    animation-delay: 3s;

    background: radial-gradient(

            5px at center,

            red,

            #FFC001

    )

}

.flame5::before {

    content: "";

    width: 0px;

    height: 0px;

    background: #FFC001;

    border-radius: 50%;

    transform: rotateZ(45deg);

    position: absolute;

    left: 45%;

    top: 60%;

    animation: gun2 4s ease-in Infinite;

    animation-delay: 6s;

    background: radial-gradient(

            5px at center,

            red,

            #FFC001

    )

}

/*设置动画实现火焰上升*/

@keyframes gun {

    0% {

        width: 10px;

        height: 10px;

        transform: translateY(0px) translateX(0px) rotateZ(45deg);

    }

    100% {

        width: 40px;

        height: 40px;

        transform: translateY(-200px) translateX(-30px) rotateZ(45deg);

        opacity:0.2;

    }

}

@keyframes gun1 {

    0% {

        width: 10px;

        height: 10px;

        transform: translateY(0px) translateX(0px) rotateZ(45deg);

    }

    100% {

        width: 40px;

        height: 40px;

        transform: translateY(-200px) translateX(30px) rotateZ(45deg);

        opacity:0.2;

    }

}

@keyframes gun2 {

    0% {

        width: 3px;

        height: 3px;

        transform: translateY(0px) translateX(0px) rotateZ(45deg);

    }

    50%{

        width: 5px;

        height: 5px;

        transform: translateY(-130px) translateX(-30px) rotateZ(45deg);

    }

    100% {

        width: 5px;

        height: 5px;

        transform: translateY(-200px) translateX(-70px) rotateZ(45deg);

    }

}

/*树枝*/

.branch1, .branch2 {

    width: 260px;

    height: 20px;

    background: #DB4732;

    position: absolute;

    top: 80%;

    left: 8%;

}

.branch1 {

    transform: rotateZ(15deg);

}

.branch2 {

    transform: rotateZ(-15deg);

}

</style>

</head>

<body>

<div class="flame">

    <div class="flame1"></div>

    <div class="flame2"></div>

    <div class="flame3"></div>

    <div class="flame4"></div>

    <div class="flame5"></div>

    <div class="flame6"></div>

    <div class="flame7"></div>

    <div class="flame8"></div>

    <div class="branch1"></div>

    <div class="branch2"></div>

</div>

</body>

</html>

　　这是一个简单用css+div布局实现的火焰效果，在网上看到觉得挺有趣，也比较美观，所以模仿一下。

这里没有用任何的js代码，仅用css动画等相关技术就可以实现。

css简单实现火焰效果的更多相关文章

  1. css3 calc()：css简单的数学运算-加减乘除

    css3 calc():css简单的数学运算–加减乘除 多好的东西啊,不用js,一个css就解决了. .box{ border:1px solid #ddd; width:calc(100% - 10 ...

  2. HTML与CSS简单页面效果实例

    本篇博客实现一个HTML与CSS简单页面效果实例 index.html <!DOCTYPE html> <html> <head> <meta charset ...

  3. CSS简单使用

    CSS简单使用 标签 : 前端技术 CSS(Cascading Style Sheet : 层叠样式表单)用来定义网页显示效果. 可以解决HTML代码对样式定义的重复,提高后期样式代码的可维护性,并增 ...

  4. 前端学习日记之HTML、CSS 简单总结

    前端学习日记之HTML.CSS 简单总结 标签(空格分隔): html css 前端学习日记 html超文本标记语言 一. h标题标签 h1-h7 <!DOCTYPE html> < ...

  5. css简单实现带箭头的边框

    原文地址 https://tianshengjie.cn/artic... css简单实现带箭头的边框 普通边框 <style> .border { width: 100px; heigh ...

  6. 3.8.1 HTML与CSS简单页面效果实例

    HTML与CSS简单页面效果实例 <!DOCTYPE html> <html> <head> <meta charset="utf-8" ...

  7. 有趣的css—简单的下雨效果2.0版

    简单的下雨效果2.0版 前言 笔者上一篇发布的文章有趣的css-简单的下雨效果中有位老哥给我提了一个很棒的建议,大致意思是波纹应该产生于雨滴的消失处. 这是按照老哥的建议完善后的效果图: 由于我制作G ...

  8. jQuery+CSS 简单代码实现遮罩层( 兼容主流浏览器 )

    /* ** jQuery版本:jQuery-1.8.3.min.js ** 浏览器:Chrome( v31.0.1650.63 m ),IE11,Firefox( v32.0.1 ),IETester ...

  9. JS+CSS简单实现DIV遮罩层显示隐藏【转藏】

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

随机推荐

  1. java-9 异常处理

    1.异常处理的基础知识 异常是程序中的一些错误,但并不是所有的错误都是异常,并且错误有时候是可以避免的. 比如说,你的代码少了一个分号,那么运行出来结果是提示是错误 java.lang.Error:如 ...

  2. SpringBoot实践 - SpringBoot+MySql+Redis

    大家都知道redis的强大之处,在目前应用上也是大显神威. 先说说他的优点: 1 读写性能优异 2 支持数据持久化,支持AOF日志和RDB快照两种持久化方式 3 支持主从复制,主机会自动将数据同步到从 ...

  3. C语言对齐

    "%-md":左对齐,若m比实际少时,按实际输出.(m为整数) "%md":右对齐,若m比实际少时,按实际输出. 我自己编了一个,给你看看实际效果: #incl ...

  4. js拉起或下载app

    产品提了个需求,通过手机网页判断是否安装了自己公司app,如果安装了则拉起app,没有安装则跳转到下载页. 经过各种查阅资料尝试总结了一个还算可以的办法. 拉起app的原理就是js和原生统一好一个地址 ...

  5. jQuery中绑定事件bind() on() live() one()的异同

    jQuery中绑定事件的四种方法,他们可以同时绑定一个或多个事件 bind()-------------------------版本号小于3.0(在Jquery3.0中已经移除,相应unbind()也 ...

  6. Asp.Net MVC学习总结（二）——控制器与动作(Controller And Action)

    一.理解控制器 1.1.什么是控制器 控制器是包含必要的处理请求的.NET类,控制器的角色封装了应用程序逻辑,控制器主要是负责处理请求,实行对模型的操作,选择视图呈现给用户. 简单理解:实现了ICon ...

  7. 购物篮模型&Apriori算法

    一.频繁项集 若I是一个项集,I的支持度指包含I的购物篮数目,若I的支持度>=S,则称I是频繁项集.其中,S是支持度阈值. 1.应用 "尿布和啤酒" 关联概念:寻找多篇文章中 ...

  8. 【转】Jqgrid学习之数据

    jqGrid可支持的数据类型:xml.json.jsonp.local or clientSide.xmlstring.jsonstring .script.function (…). Json数据 ...

  9. 服务器 'XXXXXX' 上的 MSDTC 不可用。解决方法

    今天在C#中操作数据库的时候突然发现这个问题:服务器 'USER-XXX' 上的 MSDTC 不可用. 解决方法: 在windows控制面板 --> 管理工具 --> 服务 --> ...

  10. Android 视频编辑 SDK

    Android 视频编辑 SDK接入说明 一.名词解释 分辨率:用于计算机视频处理的图像,以水平和垂直方向上所能显示的像素数来表示分辨率.常见视频分辨率的有1080P即1920x1080,720P即1 ...