文档章节

css简单实现火焰效果

originDu
 originDu
发布于 2017/04/28 15:04
字数 504
阅读 24
收藏 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
博文 69
码字总数 20317
作品 0
海淀
你所不知道的 CSS 滤镜技巧与细节

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

chokcoco
2017/09/14
0
0
8款炫酷的HTML5特效源码

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

牵着蜗牛去西藏
2015/02/09
3.4K
1
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

没有更多内容

加载失败,请刷新页面

加载更多

下一页

jetbrains系产品IDEA:mac上面提示快捷键设置

原因 由于Mac上面的Ctrl+空格变成输入法切换的快捷键,在使用IDEA的过程中,代码提示很不方便,需要使用option+/这种传统eclipse上面的代码提示快捷键作为主要快捷键。 怎么修改? 移除【opt...

亚林瓜子
30分钟前
0
0
Exclipse 输出结果时换行

System.out.println(f1 + "\n" + d1 + "\n" + d2);

笑丶笑
31分钟前
1
0
怎样治疗标签不能触发onblur事件

I realize this was over a year ago, but it showed up for me in Google while trying to solve this same issue. It seems Chrome does not consider some elements, like body and ancho......

Weijuer
34分钟前
0
0
vue常见库安装

移动设备上的浏览器默认会在用户点击屏幕大约延迟300毫秒后才会触发点击事件,这是为了检查用户是否在做双击。为了能够立即响应用户的点击事件,才有了FastClick。 安装fastclick npm insta...

林夏夕
36分钟前
0
0
kafka 教程(三) kafka Java API 编程

下午写

MrPei
37分钟前
0
0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

返回顶部
顶部