说明

上次我们了解了一些css滤镜的基础知识，
简单说 CSS滤镜 filter属性
这次我们就来用css的滤镜实现一个 火焰的效果。

解释

要实现上面的火焰效果，我们先来了解一些必要的东西。
上次我们说过两个滤镜，blur 和 contrast。
blur 是给图像设置高斯模糊，
contrast 是调整图像的对比度，
他们一起使用会产生融合的效果。
效果图

图中 红色背景 设置了 filter:contrast(20); 这点很重要，两个圆设置了 filter:blur(10px); 如果还不清楚，我们对比看看。

好的知道这些，我们开始实现火焰效果吧。
大致需要这 3 步：
1、先用边框画出三角形
要知道，如果 width是0，height也是0，只用边框的话，边框是三角形的，我们看看 width 和 height 都是0的，但边框宽度是100px的元素的样子

上图，4边的边框颜色是不一样的，我们很清楚的看见了4个三角形，我们现在需要下面这样一个东西，相信大家知道怎么实现了。

2、调整三角形的大小与颜色，实现类似火焰的样子
这一步很简单，我们只需要在上面已经实现的三角形上加这三行代码

border-radius: 45%;

transform: scaleX(.4);

filter: blur(20px) contrast(30);

效果图

3、让火焰动起来
这一步算是比较麻烦的了，不过也很好理解，就是利用上面提到的融合效果，让许多小圆随机的穿过这个三角形就可以了，看看下面这张图，就能理解原理。

好的，理解这些看代码绝对很容易了。
完成代码

<!doctype html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <style>

    body {

        background: #000;

    }

    .container {

        position: relative;

        width: 300px;

        height: 300px;

        margin: 0 auto;

        background-color: #000;

    }

    .fire {

        position: absolute;

        bottom: 0;

        left: 50%;

        border-radius: 45%;

        box-sizing: border-box;

        border: 200px solid #000;

        border-bottom: 200px solid #b5932f;

        transform: translate(-50%, 0) scaleX(.4);

        filter: blur(20px) contrast(30);

    }

    /* 小圆的样式 */

    .dot {

        position: absolute;

        bottom: -110px;

        left: 0;

        width: 24px;

        height: 24px;

        background: #000;

        border-radius: 50%;

    }

    @keyframes move {

        100% {

            transform: translateY(-350px);

        }

    }

    </style>

</head>

<body>

    <div class="container">

        <div class="fire">

        </div>

    </div>

    <script>

    //创建一个元素，放所有的小圆

    var circleBox = document.createElement('div');

    //获取随机数   from 参数表示从哪个数开始  to参数表示到哪个数结束 from<= num <= to

    function randomNum(from, to) {

        from = Number(from);

        to = Number(to);

        var Range = to - from;

        var num = from + Math.round(Math.random() * Range); //四舍五入

        return num;

    };  

    for (var i = 0; i < 40; i++) {

        //创建小圆

        var circle = document.createElement('div');

        // 下面的4个变量 代表小圆随机位置  和 随机持续时间和延迟

        var bottom = randomNum(-300, -250);

        var left = randomNum(-200, 200);

        var duration = randomNum(10, 30) / 10;

        var delay = randomNum(0, 50) / 10;

        //给生成的每个小圆 加上动画和位置属性

        circle.style.cssText += `animation:move ${duration}s linear ${delay}s infinite;bottom:${bottom}px;left:${left}px;`;

        circle.className += " dot";

        //把每个小圆 都加入这个div

        circleBox.appendChild(circle);

    };

    var fire = document.querySelector(".fire");

    //把有40个随机小圆的 div 加入DOM树

    fire.appendChild(circleBox);

    </script>

</body>

</html>

总结

这次，说的火焰效果就结束了，css的滤镜当然还能实现其他更有趣的效果，那就等大家自己去探索了。

简单说 通过CSS的滤镜 实现 火焰效果的更多相关文章

  1. PostCSS一种更优雅、更简单的书写CSS方式

    Sass团队创建了Compass大大提升CSSer的工作效率,你无需考虑各种浏览器前缀兼,只需要按官方文档的书写方式去写,会得到加上浏览器前缀的代码,如下: .row { @include displ ...

  2. 纯手工打造漂亮的垂直时间轴，使用最简单的HTML+CSS+JQUERY完成100个版本更新记录的华丽转身！

    前言 FineUI控件库发展至今已经有 5 个年头,目前论坛注册的QQ会员 5000 多人,捐赠用户 500 多人(捐赠用户转化率达到10%以上,在国内开源领域相信这是一个梦幻数字!也足以证明Fine ...

  3. [置顶] 纯手工打造漂亮的垂直时间轴，使用最简单的HTML+CSS+JQUERY完成100个版本更新记录的华丽转身！

    前言 FineUI控件库发展至今已经有 5 个年头,目前论坛注册的QQ会员 5000 多人,捐赠用户 500 多人(捐赠用户转化率达到10%以上,在国内开源领域相信这是一个梦幻数字!也足以证明Fine ...

  4. 简单实用的CSS网页布局中文排版技巧

    由于汉字的特殊性,在css网页布局中,中文排版有别于英文排版.排版是一个麻烦的问题,小编认为,作为一个优秀的网页设计师和网页制作人员,掌握一些简单的中文排版技巧是不可或缺的,所以今天特意总结了几个简单 ...

  5. 探究 CSS 混合模式\滤镜导致 CSS 3D 失效问题

    今天在写一个小的 CSS Demo,一个关于 3d 球的旋转动画,关于 CSS 3D,少不了会使用下面这几个属性: { transform-style: preserve-3d; perspectiv ...

  6. 20190614笔记（颜色透明度,css,filter,滤镜,计算属性,json和formData转换）

    今天忙里偷闲,把最近做的笔记做一下整理. 1.json和formData互相转换 适用场景:对接后台接口.后台接口写的因人而异,不同的人有不同的风格.比如,文件上传,原本就是formData格式,有人 ...

  7. 简单说 用CSS做一个魔方旋转的效果

    说明 魔方大家应该是不会陌生的,这次我们来一起用CSS实现一个魔方旋转的特效,先来看看效果图! 解释 我们要做这样的效果,重点在于怎么把6张图片,摆放成魔方的样子,而把它们摆放成魔方的样子,重点在于用 ...

  8. 简单说 通过CSS实现 文字渐变色 的两种方式

    说明 这次的重点就在于两个属性, background 属性 mask 属性 这两个属性分别是两种实现方式的关键. 解释 方式一 效果图 代码 <!DOCTYPE html> <ht ...

  9. 一个简单实用的css loading图标

    摘要 在web开发中,为了提高用户体验,在加载数据的时候都会给一个loading的提示. Html <!DOCTYPE html> <html xmlns="http:// ...

随机推荐

  1. sql的书写顺序

    例:select t.* from (select *  from t_user where isDelete = 1 limit 0,10) t order by t.qq select from ...

  2. Codeforces Round #598 (Div. 3)E（dp路径转移）

    题:https://codeforces.com/contest/1256/problem/E 题意:给一些值,代表队员的能力值,每组要分3个或3个以上的人,然后有个评价值x=(队里最大值-最小值), ...

  3. 新开通blog

    从今天开始我有blog了,,以后要经常总结一些自己接触的东西,提升自己

  4. Reveal详细安装教程

    Reveal的详细安装使用 标签: Reveal 工具 调试 iOS 一.终端的操作 首先最重要的一点,要先把Reveal软件放到Application中,否则路径是错的,后面的设置也就没有作用了 打 ...

  5. AttributeError: 'bytes' object has no attribute 'hex'

    python3.5之前bytes数据没有hex()属性 需要使用 ''.join(map(lambda x:('' if len(hex(x))>=4 else '/x0')+hex(x)[2: ...

  6. 推荐系统之矩阵分解（MF）

    一.矩阵分解 1.案例 我们都熟知在一些软件中常常有评分系统,但并不是所有的用户user人都会对项目item进行评分,因此评分系统所收集到的用户评分信息必然是不完整的矩阵.那如何跟据这个不完整矩阵中已 ...

  7. python语法基础-面向对象-进阶-长期维护

    ###############    @property定义属性    ############## # 所以对于定义属性你有好几种方式了和种类了,# 静态属性,动态属性, # property # ...

  8. python易错知识集合

    本篇用于记录在写leetcode时遇到的python易错知识. 2019.8.29 1.Python range() 函数用法: range(start, stop[, step]) start: 计 ...

  9. 微信小程序开发-易源API的调用

    起因:在开发一款旅游类微信小程序时,需要接入大量的景点信息,此时可以选择自己新建数据库导入数据并读取,但是对于我来说,因为只有一个人,数据库还涉及到需要维护方面,选择调用已有API. 过程:首先查阅微 ...

  10. labview学习——用户界面模式

    根据事件的发出源,事件可以抽象地分为用户界面事件和用户自定义事件.相关的基本知识可以参考有关的书籍,这里不再阐述事件结构的使用方法. 下图所示的结构称为用户界面事件模式,它能够很便捷地响应各种事件并且 ...