介绍 border - radius:, 45%;
变换:scaleX (。4);
过滤器:模糊(20 px),对比(30); & lt; ! doctype html>
& lt; html lang=癳n"祝辞
& lt; head>
,,,& lt; meta charset=癠TF-8"比;
,,,& lt; style>
,,,body {
,,,,,,,背景:,# 000;
,,,}
,,,.container {
,,,,,,,位置:,相对;
,,,,,,,宽度:,300 px;
,,,,,,,身高:,300 px;
,,,,,,,保证金:,0,汽车;
,,,,,,,背景颜色:,# 000;
,,,}
,,,.fire {
,,,,,,,位置:,绝对;
,,,,,,,底部:,0;
,,,,,,,左:,50%;
,,,,,,,这个特性:,45%;
,,,,,,,box-sizing:, border-box;
,,,,,,,边界:,200 px solid # 000;
,,,,,,,边界底部:,200 px solid # b5932f;
,,,,,,,变换:,翻译(-50%,0),scaleX (。4);
,,,,,,,过滤器:,模糊(20 px),对比(30);
,,,}
,,,,
,,,/*,小圆的样式,*/,,,.dot {
,,,,,,,位置:,绝对;
,,,,,,,底部:,-110 px;
,,,,,,,左:,0;
,,,,,,,宽度:,24 px;
,,,,,,,身高:,24 px;
,,,,,,,背景:,# 000;
,,,,,,,这个特性:,50%;
,,,}
,,,@keyframes move {
,,,,,,,100%,{
,,,,,,,,,,,变换:,translateY (-350 px);
,,,,,,,}
,,,}
,,,& lt;/style>
& lt;/head>
& lt; body>
,,,& lt; div 类=癱ontainer"比;
,,,,,,,& lt; div 类=癴ire"比;
,,,,,,,& lt;/div>
,,,& lt;/div>
,,,& lt; script>
,,,//创建一个元素,放所有的小圆
,,,var circleBox =, document.createElement (& # 39; div # 39;);
,,,//获取随机数,,,得到参数表示从哪个数开始,,,参数表示到哪个数结束,from<=, num & lt;=,
,,,function randomNum (,,), {
,,,,,,,得到=,数量(从);
,,,,,,,用=,数量(对);
,,,,,,,var Range =,用神;从;
,,,,,,,var num =,得到+,Math.round (math . random(), *,范围),,//四舍五入
,,,,,,,return num;
,,,},,,
,,,,
,,,for (var 小姐:=,0;,小姐:& lt;, 40;,我+ +),{
,,,,,,,//创建小圆
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
这篇文章将为大家详细讲解有关使用CSS怎么实现一个火焰效果,文章内容质量较高,因此小编分享给大家做个参考,希望大家阅读完这篇文章后对相关知识有一定的了解。
<强> 1,先用边框画出三角形
要知道,如果宽度是0,高度也是0,只用边框的话,边框是三角形的,我们看看宽度和高度都是0的,但边框宽度是100 px的元素的样子
上图,4边的边框颜色是不一样的,我们很清楚的看见了4个三角形,我们现在需要下面这样一个东西,相信大家知道怎么实现了。
<强> 2,调整三角形的大小与颜色,实现类似火焰的样子
这一步很简单,我们只需要在上面已经实现的三角形上加这三行代码
<>强效果图
<强> 3,让火焰动起来
这一步算是比较麻烦的了,不过也很好理解,就是利用上面提到的融合效果,让许多小圆随机的穿过这个三角形就可以了,看看下面这张图,就能理解原理。
好的,理解这些看代码绝对很容易了。
<强>完成代码
