简单说通过CSS的滤镜实现火焰效果

说明

上次我们了解了一些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 <= tofunction 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";//把每个小圆 都加入这个divcircleBox.appendChild(circle);};var fire = document.querySelector(".fire");//把有40个随机小圆的 div 加入DOM树fire.appendChild(circleBox);</script>
</body>
</html>

总结

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

简单说通过CSS的滤镜实现火焰效果相关推荐

html图片滤镜,纯CSS图片滤镜项目CSSgram简介
一.CSS滤镜库效果预览以下效果均是使用纯CSS实现的. 您也可以选择本机图片感受下不同的滤镜处理效果: 二.CSSgram项目简介 CSSgram项目是借助CSS filter滤镜和mix-ble ...
html自定义标签提示,用简单的jquery+CSS创建自定义的a标签title提示tooltip_HTML/Xhtml_网页制作...
简介用简单的jquery+CSS创建自定义的a标签title提示,用来代替浏览器默认行为.如图: Javascript代码代码如下: $(function() { $("a[title] ...
CSS+DIV-CSS滤镜的应用
9-1.html <html> <head> <title>alpha滤镜</title> <style> <!-- body{ ...
html+css+小图标,HTML+CSS入门一个简单实用的CSS loading图标
本篇教程介绍了HTML+CSS入门一个简单实用的CSS loading图标,希望阅读本篇文章以后大家有所收获,帮助大家HTML+CSS入门.< 在web开发中,为了提高用户体验,在加载数据的时 ...
简单上手H5+CSS前端3D酷炫特效源代码
简单上手H5+CSS前端3D酷炫特效个人觉得是这个特效是入手自己做比较简单的一个前端特效代码十分少,也很容易看懂,记得点个关注效果图: H5部分 <!DOCTYPE html> & ...
[CSS]BlendTrans滤镜
BlendTrans滤镜比起上一篇介绍的Revealtrans滤镜来要简单一些,它只有一个参数:Duration 变换时间,它的功能也比较单一,就是产生一种淡入淡出的效果,不过它的这种效果比起Reve ...
[CSS]RevealTrans 滤镜
CSS的 RevealTrans 滤镜 CSS的RevealTrans动态滤镜是一个神奇的滤镜,它能产生23种动态效果,更为奇妙的是它还能在23种动态效果中随机抽用其中的一种.用 ...
html带正方形项目列表,5种简单实用的css列表样式实例，可以直接用到项目中。...
谁不希望有一个好看而又干净的列表?这篇文章中我们给出几个实用的例子,你可以把他们直接用到自己的工作中. 我们从一个带有动画效果的垂直列表开始,接着是一个图文混排的例子,然后是一个只有图片的list例子 ...
java border边框_简单实用的css边框属性border
本文主要讲述利用border属性做出不同的几何形状从而适用于比较好看的视觉样式. 预备知识 border相关属性 border-width 边框的宽度 border-style 边框的样式 borde ...

简单说通过CSS的滤镜实现火焰效果

说明

解释

总结

简单说通过CSS的滤镜实现火焰效果相关推荐

最新文章

热门文章

简单说 通过CSS的滤镜 实现 火焰效果

说明

解释

总结

简单说 通过CSS的滤镜 实现 火焰效果相关推荐

最新文章

热门文章

简单说通过CSS的滤镜实现火焰效果

简单说通过CSS的滤镜实现火焰效果相关推荐