• Для скачивания ресурсов Форума пользователь должен написать не менее 5 полезных сообщений и получить 5 симпатий.
    Если Вы не хотите выполнять условия, Вы должны купить переход в группу "Работяга" или любое наше дополнение и сможете скачивать ресурсы, перевод происходит по email, который указывается при оплате.
Эффект пламя при наведении на кнопку

Разработка Эффект пламя при наведении на кнопку

Нет прав для скачивания
Эффект пламя при наведении на кнопку.
Умельцы наверняка быстро найдут данному эффекту применения, пишем простой код HTML:
HTML:
<a>???</a>
Пишем стиль с эффектом:
CSS:
a {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 200px;
  height: 50px;
  background: #fff;
  border-radius: 999px;
}
a:hover {
  -webkit-animation: burn 1000ms ease-out forwards;
          animation: burn 1000ms ease-out forwards;
}
a:hover::before {
  content: '';
  position: absolute;
  left: 40px;
  width: 100px;
  height: 40px;
  background: #ffe66e;
  border-radius: 100%;
  -webkit-animation: flare 1000ms ease-out forwards;
          animation: flare 1000ms ease-out forwards;
}
a:hover::after {
  content: '';
  position: absolute;
  right: 40px;
  width: 100px;
  height: 40px;
  background: #ffe66e;
  border-radius: 100%;
  -webkit-animation: flare 1000ms ease-out forwards;
          animation: flare 1000ms ease-out forwards;
}

@-webkit-keyframes flare {
  100% {
    -webkit-transform: translateY(-20px) scale(1.5);
            transform: translateY(-20px) scale(1.5);
    -webkit-filter: blur(10px);
            filter: blur(10px);
    opacity: 0;
  }
}

@keyframes flare {
  100% {
    -webkit-transform: translateY(-20px) scale(1.5);
            transform: translateY(-20px) scale(1.5);
    -webkit-filter: blur(10px);
            filter: blur(10px);
    opacity: 0;
  }
}
@-webkit-keyframes burn {
  0% {
    color: #ff826e;
    background: #ffe66e;
    box-shadow: 0 0 5px 0 #c8000a, 0 0 5px 0 rgba(230, 30, 10, 0.8), 0 0 5px 0 rgba(230, 230, 10, 0.6);
  }
  100% {
    color: black;
    background: white;
    box-shadow: 0 -35px 40px 30px rgba(255, 130, 10, 0), 0 -30px 30px 10px rgba(230, 30, 10, 0), 0 -20px 10px 0 rgba(255, 255, 10, 0);
  }
}
@keyframes burn {
  0% {
    color: #ff826e;
    background: #ffe66e;
    box-shadow: 0 0 5px 0 #c8000a, 0 0 5px 0 rgba(230, 30, 10, 0.8), 0 0 5px 0 rgba(230, 230, 10, 0.6);
  }
  100% {
    color: black;
    background: white;
    box-shadow: 0 -35px 40px 30px rgba(255, 130, 10, 0), 0 -30px 30px 10px rgba(230, 30, 10, 0), 0 -20px 10px 0 rgba(255, 255, 10, 0);
  }
}
Результат нашего эффекта:
1q78.gif
Автор
baltun
Скачиваний
0
Просмотры
557
Первый выпуск
Обновление
Рейтинг
0.00 звёзд Оценок: 0

Ещё ресурсы от baltun

Похожие ресурсы
Верх Низ