说明

上次我们了解了一些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. iOS补位动画、沙漏效果、移动UITableViewCell、模拟贪吃蛇、拖拽进度等源码

    iOS精选源码 JHAlertView - 一款黑白配色的HUD之沙漏效果 继承UIButton的自定义按钮SPButton 用递归算法实现iOS补位动画 iOS 长按移动UITableViewCel ...

  2. kubectl格式化输出和调试

    1.格式化输出 以特定的格式想终端输出详细信息,可以在 kubectl 命令中添加 -o  或者 -output 选项 输出格式 描述 -o=custom-columns=<spec> 使 ...

  3. linux 上安装 keepalive

    1.keepalive 单机安装 1.1 安装环境 yum -y install kernel-devel* openssl-* popt-devel lrzsz openssh-clients li ...

  4. nginx.conf文件详解

    https://www.jb51.net/article/103968.htm https://www.cnblogs.com/zhang-shijie/p/5428640.html https:// ...

  5. 吴裕雄--天生自然python学习笔记：python OpenCV 基本绘图

    Open CV 提供了绘制直线.圆形.矩形等基本绘 图的功能 . Open CV 画直线的语法为: 在画布上添加文字的语法为 : 用 Open CV 绘制基本图形 以 OpenCV 基本绘图绘制各种图 ...

  6. HTML配色表方案

  7. spring顾问包装通知

    前边说到了顾问就是通知,没有实践,这里就实践一下,证明一下. 虽然可以说顾问就是通知,但是他们还是有的一定的区别的,通知是将目标类中所有的方法都进行的增强,而顾问却可以指定到特定的方法上,也就是说顾问 ...

  8. iText 中文无法显示

    /** * 导出PDF工具com.lowagie.itext测试 * * @param response * @throws IOException * @throws DocumentExcepti ...

  9. MariaDB 外键

    drop database literatureDB; create database literatureDB; use literatureDB; # 类型表 create table `type ...

  10. MongoDBcrud操作，采集部分代码

    using System; using System.Collections.Generic; using System.ComponentModel.Design; using System.Lin ...