Css 是否可能有火焰围绕div边界流动的效果

我只是碰巧想起了多年前在Windows手机上看到的一种图形效果

这是一个项目列表，当您选择其中一个项目时，将有火焰围绕所选项目流动

我对css3中的动画效果进行了快速研究，发现了一些可能有用的特性，例如关键帧、过渡、动画-*等

但我仍然不知道如何将它们结合起来来呈现这种效果。 如果有人能帮助我并在JSFIDLE中向我展示效果，那将是非常酷的

---

提前感谢。

这可能不是您想要的效果。。它不是使用css3中的动画效果创建的。看看是否有帮助。。此效果是使用javascript和画布创建的

JS部分：

// variables
var canvas, ctx;
var data_width;
var data_height;
var colors = [];
var out_data = [];

// new filled array function
function new_filled_array(len, val) {
    var rv = new Array(len);
    while (--len >= 0) {
        rv[len] = val;
    }
    return rv;
}

// prepare palette function
function prepare_palette() {
    for (var i = 0; i < 64; ++i) {
        colors[i + 0] = {r: 0, g: 0, b: i << 1, a: i};
        colors[i + 64] = {r: i << 3, g: 0, b: 128 - (i << 2), a: i+64};
        colors[i + 128] = {r: 255, g: i << 1, b: 0, a: i+128};
        colors[i + 192] = {r: 255, g: 255, b: i << 2, a: i+192};
    }
}

// drawing functions
function clear() { // clear canvas function
    ctx.clearRect(0, 0, ctx.canvas.width, ctx.canvas.height);
}

function drawScene() { // main drawScene function
    clear(); // clear canvas

    var data_cnt = data_width * (data_height - 1);
    for (var i = 0; i < data_width; i++) {
        out_data[data_cnt + i] = (0.7 > Math.random()) ? 255 : 0;
    }

    for (var y = 0; y < 175; y++){
        for (var x = 0; x < data_width; x++){
            var s = data_cnt + x;

            var temp_data = out_data[s] + out_data[s + 1] + out_data[s - 1] + out_data[s - data_width];
            temp_data >>= 2;
            if (temp_data > 1){
                temp_data -= 1;
            }
            temp_data <<= 0;

            out_data[s - data_width] = temp_data;

            var id = s << 2;
            img_data.data[id + 0] = colors[temp_data].r; // red
            img_data.data[id + 1] = colors[temp_data].g; // green
            img_data.data[id + 2] = colors[temp_data].b; // blue
            img_data.data[id + 3] = colors[temp_data].a; // alpha 
        }
        data_cnt -= data_width;
    }

    // draw result data
    ctx.putImageData(img_data, 0, 0);
}

if (window.attachEvent) {
    window.attachEvent('onload', main_init);
} else {
    if(window.onload) {
        var curronload = window.onload;
        var newonload = function() {
            curronload();
            main_init();
        };
        window.onload = newonload;
    } else {
        window.onload = main_init;
    }
}

function main_init() {

    // creating canvas and context objects
    canvas = document.getElementById('panel');
    ctx = canvas.getContext('2d');

    // preparing initial image data (empty)
    img_data = ctx.createImageData(canvas.width, canvas.height);

    data_width = img_data.width,
    data_height = img_data.height,

    prepare_palette();

    // allocating array with zeros
    out_data = new_filled_array(data_width * data_height, 0);

    setInterval(drawScene, 30); // loop drawScene

}

//变量
var画布，ctx；
var数据宽度；
var数据高度；
var颜色=[]；
var out_data=[]；
//新的填充数组函数
函数新填充数组（len，val）{
var rv=新阵列（len）；
而（--len>=0）{
rv[len]=val；
}
返回rv；
}
//准备调色板功能
函数prepare_调色板（）{
对于（变量i=0；i<64；++i）{
颜色[i+0]={r:0，g:0，b:i我想到了两个选项。第一个选项有点困难，可能会产生不太令人满意的结果，但它只是CSS3。你可以使用辉光效果在DIV的边界周围模拟火焰效果

教程：

另一个更简单、更令人满意的选择是使用GIF。是的，你听到我说的了。只需在你的DIV边界周围添加带有燃烧火焰图像的DIV。你可以在元素的每一侧使用4个DIV，也可以使用一个将被缩放的DIV-玩一玩，看看什么最适合你

我知道这有点像犹太人区，但拜托-你想在HTML元素周围燃烧火焰：）
编辑：链接不再起作用-看看其他解决方案。这是一个永远在这里发布代码而不是链接的教训

=================

旧帖子，但如果将来有人遇到这种需求，这里有一个纯CSS解决方案：


及


只要看一下源代码，看看它是如何工作的。
对于使用CSS寻找小火焰效果的人来说，我觉得很酷。这可能无法回答OPs的问题，但我将把它发布在这里，因为它可以方便其他人使用


您可以使用
边框图像
属性缩放和剪裁图像，使其成为边框，并相应地设置动画。
以下是一个示例：


正文{
保证金：0；
填充：0；
}
div{
宽度：100vw；
高度：100vh；
显示器：flex；
证明内容：中心；
保证金：0；
填充：0；
对齐项目：居中；
}
p{
宽度：50%；
动画：设置8s线性向前的动画；
填充：10px；
}
@关键帧设置动画{
0%{
边框样式：实心；
边框宽度：0px 0px 0px；
边框图像：url(https://image.shutterstock.com/image-vector/cartoon-fire-flame-frame-borders-260nw-1362735449.jpg)73157 73151重复拉伸；
}
100%{
边框样式：实心；
边框宽度：29px 0px 29px 0px；
边框图像：url(https://image.shutterstock.com/image-vector/cartoon-fire-flame-frame-borders-260nw-1362735449.jpg)73157 73151重复拉伸；
}
}

公共知识是精英们的神圣财富。全方位的最大价值观是社会的尊严，是社会的权威，也是社会的权威

Hi newTag，thx，用于提供此插件，但我发现它不能在边框周围显示火焰，尽管有一个“燃烧边框”选项。有什么想法吗？谢谢你的帮助和时间。但我想我可能无法清楚地描述我的问题。我想要的是一个围绕着分区边界流动的火焰，而不是在分区内部燃烧的火焰。当我说围绕分区边界时，我的意思是火焰应该显示在所有（左、上、右、下）边界上（试着想象一个燃烧着的窗户）。我相信很多StackOverFlowers也在等待这个效果，因为它太酷了！@Franva抱歉，我只是试着给一个小样本帮助。是的，我也在等待这个效果。嗨，newTag，听到你也在期待这个酷效真是太好了！）希望这个问题能引起足够的关注，以便有人愿意提供一个悬赏：）我真的很期待得到满意的答案和很酷的最终效果！嗨，辍学者，谢谢你的帮助。是的，我同意你说使用纯css是困难的，但我还是想走这条路，因为这是当今的趋势第二个解决方案，我认为它也足以呈现动画效果，但对于赶上当前趋势（更多的是CSS，更少的图片）并没有多大帮助.我会暂时不回答这个问题，看看是否有人真的能达到惊人的效果。不管怎样，我们都想看看是如何做到的，对吗？：）谢谢你的评论，我完全同意。是的，如果有人想出一种方法来做到这一点，而不在元素周围使用额外的图像，那将非常棒。嗨，Dropout，是的，只要这个问题和答案中的所有人都期待着真正的酷效果！我也是！！希望这个问题能引起足够的注意，以便有人最终只使用css就能产生真正的酷效果，或者至少提供一些奖励：）