说明

上次我们了解了一些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. iTOP-4412开发板qt4文件的移植和修改

    在 7.4 小节介绍配置文件的时候,提到迅为制作的触摸库文件“/usr/local/tslib”,迅为 已经将触摸功能编译到 Qt/E4.7.1 的库文件中,开发板可以支持触摸和鼠标功能. 用户在前面 ...

  2. sql server 重命名表名,字段名

    重命名表名: exec sp_rename 'oldName','newName'; 重命名字段名: exec sp_rename 'tableName.[oldName]','newName','c ...

  3. 109）PHP与oracle网址

    https://pecl.php.net/package/oci8/2.1.8/windowshttps://www.toadworld.com/platforms/oracle/w/wiki/116 ...

  4. git 首次提交

    git init# 将本地仓库与码云远程仓库进行关联 git remote add origin git的url地址 git add . git commit -m "描述" # ...

  5. maven setting.xml说明

    <?xml version="1.0" encoding="UTF-8"?> <settings xmlns="http://mav ...

  6. 利用git上传文件到github

    git add 文件名称/. "."代表全部 git commit -m -a git push -u origin master 推送到远程仓库 ---------------- ...

  7. python函数参数理解

    1.位置参数 函数调用时,参数赋值按照位置顺序依次赋值. e.g. def function(x): 3 return x * x 5 print function(2) 输出结果: 4 def fu ...

  8. Java反射的应用 --- 内省

    一.基础概念 内省(Introspector) 是Java 语言对 JavaBean 类属性.事件的一种缺省处理方法.Java JDK中提供了一套 API 用来访问某个属性的 getter/sette ...

  9. Redmine it!

    redmine插件开发简介 最稳妥的学习应该是先看官方文档,官方还给了一个具体的插件开发教程,不过如果一步不差按照教程敲代码,其实会发现还是有些问题的,需要稍稍改动. 这里,我自己编写了一个简单的插件 ...

  10. [LC] 442. Find All Duplicates in an Array

    Given an array of integers, 1 ≤ a[i] ≤ n (n = size of array), some elements appear twice and others ...