文档章节

css简单实现火焰效果

originDu
 originDu
发布于 2017/04/28 15:04
字数 504
阅读 37
收藏 0
<!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动画等相关技术就可以实现。

本文转载自:

共有 人打赏支持
上一篇: webpack2基本介绍
下一篇: 随记
originDu
粉丝 1
博文 75
码字总数 22987
作品 0
海淀
私信 提问
你所不知道的 CSS 滤镜技巧与细节

承接上一篇你所不知道的 CSS 动画技巧与细节,本文主要介绍 CSS 滤镜的不常用用法,希望能给读者带来一些干货! 系列 CSS 文章汇总在我的 Github ,持续更新,欢迎点个 star 订阅收藏。 OK,...

chokcoco
2017/09/14
0
0
Ubuntu12.04和linux mint 13的3D桌面效果的实现及compiz conf...

1:要安装的软件包: compiz fusion-icon; compiz config设置管理器(即Compiz configuration settings manager 软件包 fusion-icon软件包); 要在附加驱动里安装好与显卡相配的驱动,并确保...

郑杜金
2012/09/13
0
0
Campfire

实现火焰动画效果。其实作者是利用多张火焰图片,做成一个image sequence,然后播放这个sequence,从而产生动态的火焰效果。老实说,这不是一个很好的实现方法,仅仅比嵌入一段视频好一点,还...

匿名
2012/07/06
476
0
纯Shading Language绘制飞机火焰效果

上篇《纯Shading Language绘制HTML5时钟》体现了GLSL可编程性特点,但没有体现GLSL可编程出各种酷炫效果的特点,今天我们将用纯Shading Language绘制火焰效果,并将其应用到《HT图形组件设计...

xhload3d
2015/01/03
0
2
8款炫酷的HTML5特效源码

HTML5的强大不仅在于可以让网页元素更加灵活多变,更在于它可以很方便的实现网页动画的特效,可以让你的网站更加富有现代化特色。今天,就给大家分享8个让人难忘的HTML5炫酷动画~ 1、HTML5 C...

牵着蜗牛去西藏
2015/02/09
4K
1

没有更多内容

加载失败,请刷新页面

加载更多

Spak—— sparkCore源码解析之RangePartitioner源码

   分区过程概览 RangePartitioner分区执行原理: 计算总体的数据抽样大小sampleSize,计算规则是:至少每个分区抽取20个数据或者最多1M的数据量。 根据sampleSize和分区数量计算每个分区的...

freeli
15分钟前
1
0
从内部自用到对外服务,配置管理的演进和设计优化实践

本文整理自阿里巴巴中间件技术专家彦林在中国开源年会上的分享,通过此文,您将了解到: 微服务给配置管理所带来的变化 配置管理演进过程中的设计思考 配置管理开源后的新探索 配置中心控制台...

阿里云官方博客
16分钟前
0
0
MySQL用户管理,常用MySQL语句、MySQL数据库备份恢复

12月6日任务 13.4 mysql用户管理 13.5 常用sql语句 13.6 mysql数据库备份恢复 13.4 mysql用户管理 grant all on *.* to 'user1' identified by 'passwd'; grant SELECT,UPDATE,INSERT on db......

zgxlinux
17分钟前
1
0
Spring异常之Druid – unregister mbean error

Spring异常之Druid – unregister mbean error 2017年04月19日 12:13:42 Dr.Zhu 阅读数:6688 版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/zt_fucker/arti...

linjin200
22分钟前
1
0
微信小程序webview问题

今天在改小程序的时候在使用webview的时候切换webview的地址行为,出现了诡异的情况。 默认querystring里会有多个?符号,使用的时候被微信给截取了,导致程序找不到改页面。 而且querystri...

钟元OSS
25分钟前
1
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部