Question

我碰巧想起了多年前在Windows Mobile Phone中看到的图形效果。

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

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

但我仍然不知道如何一起使用它们来呈现这种效果。如果有人可以帮助我并向我展示jsfiddle中的效果，那将会非常酷。

提前谢谢。

Answer 1

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

http://pag.es/fire/

和

http://pag.es/fire/test.html

只需查看源代码即可查看其工作原理。

Answer 2

对于那些使用CSS寻找一点火焰效果的人来说， here's one 我觉得很酷。这可能不会回答OP的问题，但我会发布它，因为它可以为其他人派上用场。

<div class="container">
  <div class="red flame"></div>
  <div class="orange flame"></div>
  <div class="yellow flame"></div>
  <div class="white flame"></div>
  <div class="blue circle"></div>
  <div class="black circle"></div>
</div>

body{
  background:black;
}

.container{
  margin:80px auto;
  width: 60px;
  height: 60px;
  position:relative;
  transform-origin:center bottom;
  animation-name: flicker;
  animation-duration:3ms;
  animation-delay:200ms;
  animation-timing-function: ease-in;
  animation-iteration-count: infinite;
  animation-direction: alternate;
}

.flame{
  bottom:0;
  position:absolute;
  border-bottom-right-radius: 50%;
  border-bottom-left-radius: 50%;
  border-top-left-radius: 50%;
  transform:rotate(-45deg) scale(1.5,1.5);
}

.yellow{
  left:15px; 
  width: 30px;
  height: 30px;
  background:gold;
  box-shadow: 0px 0px 9px 4px gold;
}

.orange{
  left:10px; 
  width: 40px;
  height: 40px;
  background:orange;
  box-shadow: 0px 0px 9px 4px orange;
}

.red{
  left:5px;
  width: 50px;
  height: 50px;
  background:OrangeRed;
  box-shadow: 0px 0px 5px 4px OrangeRed;
}

.white{
  left:15px; 
  bottom:-4px;
  width: 30px;
  height: 30px;
  background:white;
  box-shadow: 0px 0px 9px 4px white;
}

.circle{
  border-radius: 50%;
  position:absolute;  
}

.blue{
  width: 10px;
  height: 10px;
  left:25px;
  bottom:-25px; 
  background: SlateBlue;
  box-shadow: 0px 0px 15px 10px SlateBlue;
}

.black{
  width: 40px;
  height: 40px;
  left:10px;
  bottom:-60px;  
  background: black;
  box-shadow: 0px 0px 15px 10px black;
}

@keyframes flicker{
  0%   {transform: rotate(-1deg);}
  20%  {transform: rotate(1deg);}
  40%  {transform: rotate(-1deg);}
  60%  {transform: rotate(1deg) scaleY(1.04);}
  80%  {transform: rotate(-2deg) scaleY(0.92);}
  100% {transform: rotate(1deg);}
}

Answer 3

这可能不是您正在寻找的效果..不是使用css3中的动画效果创建的。看看它是否有帮助..这个效果是使用javascript和canvas创建的。

JS Part：

// 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

}

在此处查看演示.. http://jsbin.com/qefo/6/edit

Answer 4

我想到了两个选择。第一个有点困难，可能会产生不令人满意的结果，但它只是CSS3。您可以使用发光效果模拟围绕DIV边框的类似火焰的效果。

教程：http://zurb.com/playground/radioactive-buttons

另一个更简单，更令人满意的选择是使用GIF。是的你听到了我只需在DIV的边框周围添加DIV和燃烧火焰的图像。您可以为元素的每一面使用4个DIV，也可以使用一个可以缩放的DIV - 稍微玩一下，看看哪个最适合你。

我知道这是一种类似贫民窟的方法，但是来吧 - 你想要在你的HTML元素周围燃烧火焰：）

Answer 5

您可以使用border-image属性将图像缩放和裁剪为边框，并对其进行动画处理。这是一个示例：

body{
  margin:0;
  padding:0;
}
div{
  width:100vw;
  height:100vh;
  display:flex;
  justify-content:center;
  margin:0;
  padding:0;
  align-items:center;
}
p{
  width:50%;
  animation:animate 8s linear forwards;
  padding:10px;
  
}

@keyframes animate{
  0%{
    border-style: solid;
border-width: 0px 0px 0px;
border-image: url(https://image.shutterstock.com/image-vector/cartoon-fire-flame-frame-borders-260nw-1362735449.jpg) 73 157 73 151 repeat stretch;
  }
  100%{
    border-style: solid;
border-width: 29px 0px 29px 0px;
border-image: url(https://image.shutterstock.com/image-vector/cartoon-fire-flame-frame-borders-260nw-1362735449.jpg) 73 157 73 151 repeat stretch;
  }
}

<body>
<div>
  <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Omnis maxime suscipit dolorum porro eius dignissimos commodi quibusdam expedita rerum alias asperiores iste nisi animi modi eligendi quam quia, voluptas earum!</p>
</div>
</body>

是否有可能在div边界周围流动火焰

5 个答案: