文档章节

css简单实现火焰效果

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

© 著作权归作者所有

共有 人打赏支持
originDu
粉丝 1
博文 49
码字总数 16782
作品 0
海淀
你所不知道的 CSS 滤镜技巧与细节

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

chokcoco ⋅ 2017/09/14 ⋅ 0

8款炫酷的HTML5特效源码

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

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

推荐六款炫酷的HTML5效果插件

1. HTML5 3D图片阴影翻转动画 效果很酷 分享一款很酷的HTML5 3D动画特效,这款3D特效可以为你的图片增加阴影的效果,而且可以让图片在鼠标滑过的时候出现3D翻转的动画效果。这和HTML5 3D动画...

tower1229 ⋅ 2017/07/03 ⋅ 0

OpenGL ES3.0实现简单粒子火焰效果

通过粒子系统来实现火焰效果,基本思想是把一团火焰看成是由一颗颗有其生命期的粒子组成,粒子在不停的产生直至消亡从而产生升腾的火焰效果。通过生成每个粒子的坐标,每颗火焰粒子是一个矩形...

C6C ⋅ 2017/10/07 ⋅ 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

Campfire

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

匿名 ⋅ 2012/07/06 ⋅ 0

纯Shading Language绘制飞机火焰效果

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

xhload3d ⋅ 2015/01/03 ⋅ 2

CAEmitterLayer 全面介绍及实现各种粒子效果

本文首次发布于 CAEmitterLayer 全面介绍及实现各种粒子效果, 作者余东洋,转载请保留原文链接. 前言 作为CALayer的子类的一个高性能的粒子引擎,被用来创建实时的粒子动画如爆炸、烟雾及火焰...

dyoung26 ⋅ 2017/07/20 ⋅ 0

程序猿必备的10款超炫酷HTML5 Canvas插件

  1.超炫酷HTML5 Canvas 3D旋转地球动画   这是一款基于HTML5 Canvas的3D地球模拟动画,动画以太空作为背景,地球在太空中旋转,同时我们也可以拖拽鼠标来从不同的角度观察地球。另外我们...

爱前端 ⋅ 2017/12/04 ⋅ 0

巧用CSS的Glow滤镜

作者:冯永曜 对一个对象使用“glow”滤镜后,这个对象的边缘就会产生类似发光的效果,这种效果在PHTOSHOP中做起来都比较麻烦,而在DW3中用CSS的“glow”滤镜来制作却是如此地简单,而且节约...

晨曦之光 ⋅ 2012/03/09 ⋅ 0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

笔试题之Java基础部分【简】【一】

基础部分的顺序:基本语法,类相关的语法,内部类的语法,继承相关的语法,异常的语法,线程的语法,集合的语法,io 的语法,虚拟机方面的语法,其他 1.length、length()和size() length针对...

anlve ⋅ 22分钟前 ⋅ 2

table eg

user_id user_name full_name 1 zhangsan 张三 2 lisi 李四 `` ™ [========] 2018-06-18 09:42:06 星期一½ gdsgagagagdsgasgagadsgdasgagsa...

qwfys ⋅ 47分钟前 ⋅ 0

一个有趣的Java问题

先来看看源码: public class TestDemo { public static void main(String[] args) { Integer a = 10; Integer b = 20; swap(a, b); System.out......

linxyz ⋅ 51分钟前 ⋅ 0

十五周二次课

十五周二次课 17.1mysql主从介绍 17.2准备工作 17.3配置主 17.4配置从 17.5测试主从同步 17.1mysql主从介绍 MySQL主从介绍 MySQL主从又叫做Replication、AB复制。简单讲就是A和B两台机器做主...

河图再现 ⋅ 今天 ⋅ 0

docker安装snmp rrdtool环境

以Ubuntu16:04作为基础版本 docker pull ubuntu:16.04 启动一个容器 docker run -d -i -t --name flow_mete ubuntu:16.04 bash 进入容器 docker exec -it flow_mete bash cd ~ 安装基本软件 ......

messud4312 ⋅ 今天 ⋅ 0

OSChina 周一乱弹 —— 快别开心了,你还没有女友呢。

Osc乱弹歌单(2018)请戳(这里) 【今日歌曲】 @莱布妮子 :分享吴彤的单曲《好春光》 《好春光》- 吴彤 手机党少年们想听歌,请使劲儿戳(这里) @clouddyy :小萝莉街上乱跑,误把我认错成...

小小编辑 ⋅ 今天 ⋅ 8

Java 开发者不容错过的 12 种高效工具

Java 开发者常常都会想办法如何更快地编写 Java 代码,让编程变得更加轻松。目前,市面上涌现出越来越多的高效编程工具。所以,以下总结了一系列工具列表,其中包含了大多数开发人员已经使用...

jason_kiss ⋅ 昨天 ⋅ 0

Linux下php访问远程ms sqlserver

1、安装freetds(略,安装在/opt/local/freetds 下) 2、cd /path/to/php-5.6.36/ 进入PHP源码目录 3、cd ext/mssql进入MSSQL模块源码目录 4、/opt/php/bin/phpize生成编译配置文件 5、 . ./...

wangxuwei ⋅ 昨天 ⋅ 0

如何成为技术专家

文章来源于 -- 时间的朋友 拥有良好的心态。首先要有空杯心态,用欣赏的眼光发现并学习别人的长处,包括但不限于工具的使用,工作方法,解决问题以及规划未来的能力等。向别人学习的同时要注...

长安一梦 ⋅ 昨天 ⋅ 0

Linux vmstat命令实战详解

vmstat命令是最常见的Linux/Unix监控工具,可以展现给定时间间隔的服务器的状态值,包括服务器的CPU使用率,内存使用,虚拟内存交换情况,IO读写情况。这个命令是我查看Linux/Unix最喜爱的命令...

刘祖鹏 ⋅ 昨天 ⋅ 0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

返回顶部
顶部