Как создать тусклое свечение, но чтобы оно изменяло размер (или вело себя как лавовая лампа)?

Question

Я добавил @keyframes moveBackground, но не сильно помогло

Answer 1

Попробуйте вынести своё свечение в отдельный слой и работайте с ним, меняя его свойства, позицию или прозрачность.

Я воспользовался псевдоэлементом ::before для создания пустого слоя который растянул и анимировал с помощью @keyframes

body {
  background-color: black;
}

.background-animation {
  position: relative;
  width: 300px;
  height: 300px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.background-animation::before {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: -1;
  background-image: radial-gradient(circle, #ff8c0070 20%, transparent 80%);
  animation: moveBackground 2s infinite alternate ease-in-out;
}

@keyframes moveBackground {
  0% {
    transform: translateY(0);
    opacity: 0.75;
  }
  100% {
    transform: translateY(-20px);
    opacity: 1;
  }
}

<div class="background-animation">
  <button>Click?</button>
</div>

БЛОГ НА HUSL

Как создать тусклое свечение, но чтобы оно изменяло размер (или вело себя как лавовая лампа)?

Ответы (1 шт):