Как создать круглый эффект огня при наведении

#javascript #html #css #svg #canvas

Наткнулся на сайте Хоббита на такой прелестный эффект, который я обычно встречал в играх.

Есть два блока, левый и правый (добро и зло):



При наведении на один из этих блоков создается внутри огненное кольцо:

  



Стало очень интересно как достичь этого эффекта.



.wrapper {
  height:20px;
  width:20px;
}

  






    

Ответы

Ответ 1

Лучше всего использовать для таких задач спрайты, как в данном случае:
P.S. Пример не совсем совпадает с реальным:D



const $d = document;
const canvas = $d.getElementById("canvas"),
  ctx = canvas.getContext("2d");
let main = $d.querySelector(".main");

function init() {
  let fire = new Image();
  fire.src =
    "https://image.ibb.co/gcaWJz/image.png";
  let w = fire.width,
    h = fire.height,
    srcW = fire.width / 4,
    srcH = fire.height / 7,
    srcX = 0,
    srcY = 0,
    flag = 0,
    currFrame = 0;

  main.onmouseenter = () => {
    const interval = setInterval(() => {
      ++currFrame;
      if (currFrame == 3) {
        currFrame = 0;
        srcX = 0;
        flag += 1;
        srcY = srcH * flag;
        if (flag == 5) {
          srcY = 0;
          flag = 0;
          ctx.clearRect(0, 0, w, h);
          clearInterval(interval);
        }
      } else {
        srcX = currFrame * srcW;
        ctx.drawImage(fire, -srcX, -srcY, w, h);
      }
    }, 45);
  };
  main.onmouseleave = () => {
    ctx.clearRect(0, 0, w, h);
  };
}

//init
init();
$d.body.onload = init;
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html,
body {
  height: 100%;
}

body {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  font-family: 'Roboto', sans-serif;
}

img {
  width: 100%;
}

h2 {
  text-transform: uppercase;
  margin: 2.5rem;
  color: #E25822; /*flame color*/
  text-shadow: 0.0625rem 0.0625rem 0.125rem rgba(0, 0, 0, 0.9);
}

.main {
  font-size: 0;
  position: relative;
  width: 9.375rem;
  height: 9.375rem;
  cursor: pointer;
}

.main:hover .effect img {
  transition-delay: 500ms;
  opacity: 1;
}

.effect img {
  position: absolute;
  top: -0.0625rem;
  left: 0;
  transition: opacity 300ms;
  animation-name: rotation;
  animation-duration: 30000ms;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
  opacity: 0;
}

.effect canvas {
  width: 100%;
  position: absolute;
  top: 0;
  left: 0;
}

@keyframes rotation {
  from {
    -webkit-transform: rotate(0deg) scale(0.9);
    transform: rotate(0deg) scale(0.9);
  }
  to {
    -webkit-transform: rotate(360deg) scale(0.9);
    transform: rotate(360deg) scale(0.9);
  }
}

hover

  
  

    
    
  



Ответ 2

.good {
  height:200px;
  width:200px;
  background-image: url(https://image.ibb.co/gapib8/good_icon.png);
  background-size:cover;
  box-sizing:border-box;
  padding:10px;
}
.good .ring {
  overflow:hidden;

  transition: 1s opacity;
  transition-timing-function:easeInOut;
  opacity:0;
  height:100%;
  width:100%;
  background-image: url(https://image.ibb.co/eJCQpT/fire_ring.png);
  background-repeat:no-repeat;
  background-size:cover;


}
.good:hover .ring {
  opacity:1;

}

  


  



Ответ 3

Колечко из огня с эффектом заполнения сделанное при помощи фрагментного шейдера. 

















PS: самая актуальная версия тут

PPS: если из шейдера убрать множители на sdf колечка, то будет хорошо видно как устроен
огонь.


Ответ 4

Как вариант, реализация появления можно сделать на спрайте.. Но над спрайтом надо
будет заморочиться.
Увы, я не умею рисовать, по этому просто поделил картинку на сегменты, по этому это
не очень "красочно" выглядит, но имеет право на жизнь)



.hover {
  display: block;
  width: 200px;
  height: 200px;
  position: relative;
}

.hover img {
  display: block;
  width: 200px;
  height: 200px;
}

.hover::before, .hover::after {
  content: '';
  display: block;
  width: 184px;
  height: 184px;
  position: absolute;
  left: 0; top: 0; right: 0; bottom: 0;
  margin: auto;
  opacity: 0;
  pointer-events: none;
}

.hover::before {
  background: url('https://i.stack.imgur.com/Td8GG.png') no-repeat left center /
calc(100% * 8) 100%;
}

.hover::after {
  background: url('https://image.ibb.co/eJCQpT/fire_ring.png') no-repeat center center
/ 100%;
}

.hover:hover::before {
  opacity: 1;
  animation: effect .2s steps(7, end) forwards;
  transition: opacity .1s linear;
}

.hover:hover::after {
  animation: effect_rotate 3s .2s linear infinite;
}

@keyframes effect {
  0% {background-position: 0 center;}
  100% {background-position: 100% center;}
}

@keyframes effect_rotate {
  0% {opacity: .25; transform: rotate(0deg);}
  50% {opacity: .5; transform: rotate(180deg);}
  100% {opacity: .25; transform: rotate(360deg);}
}

  





P.s.

Не знаю как выглядит это на сайте-примере, ибо ссылка битая, по этому с "оригиналом"
думаю не совпадает.