Анимированный css градиент внутри элемента - PullRequest
Новая
       23

Анимированный css градиент внутри элемента

0 голосов
/ 26 февраля 2020

У меня есть портфолио WordPress тема, которую я адаптирую, и не могу понять, как применить этот градиент к указанному c элементу моей главной страницы. Я просмотрел онлайн и до сих пор выяснил, что приведенный ниже код нуждается в более точном селекторе, к которому нужно обратиться, но проблема заключается в том, чтобы найти его для рассматриваемого элемента! 

body
 {background: linear-gradient(-45deg, #47bcc2, #bee9e8, #c4e7d4, #00bd9d, #8bd7d2);
    background-size: 400% 400%;
 animation: gradient 15s ease infinite;
}

@keyframes gradient {
    0% {
        background-position: 0% 50%;
    }
    50% {
        background-position: 100% 50%;
    }
    100% {
        background-position: 0% 50%;
    }
}

Итак, я ' Мне бы хотелось, чтобы анимированный градиент находился внутри области цвета бирюзового цвета (в настоящее время изображение). Когда вы прокручиваете вниз бирюзовый фон и текст заголовка становится белым, вы видите сетку проектов.

Я не хочу применять градиент к «телу», но я не уверен, где его применить. поэтому он работает как изображение тила - исчезает при прокрутке.

Это элемент изображения тила, который я пытаюсь изменить в инспекторе - перед любыми настройками

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

Текущее представление - применение градиента к телу с отключенным элементом изображения

I think проблема в том, что элемент перехода / затухания закодирован в этот раздел изображения и перекрывает линейный градиент - но я довольно новичок в этих видах настроек! Кто-нибудь может указать мне правильное направление, пожалуйста?

Спасибо!

РЕДАКТИРОВАТЬ: Вот оригинал css для заголовка героя, который я пытаюсь адаптировать - это случай, когда градиент css где-то здесь? 

.hero-header {
  position: fixed;
  width: 100%;
  height: 100%;
  width: 100vw;
  height: 100vh;
  top: 0;
  left: 0;
  z-index: 88; }
  .hero-header .media {
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center center;
    width: 100%;
    height: 100%;
    width: 100vw;
    height: 100vh;
    top: 0;
    left: 0;
    z-index: 88;
    position: absolute;
    opacity: 0;
    transform: translateZ(0) scale(1.015);
    transition: opacity 555ms cubic-bezier(0.39, 0.575, 0.565, 1) 100ms, transform 555ms cubic-bezier(0.39, 0.575, 0.565, 1) 200ms; }
    .hero-header .media.active {
      opacity: 1;
      transform: translateZ(0) scale(1); }
    .hero-header .media.unmount-transition {
      transition: opacity 400ms cubic-bezier(0.39, 0.575, 0.565, 1);
      transform: translateZ(0) scale(1); }

1 Ответ

0 голосов
/ 27 февраля 2020

Чтобы добиться желаемого эффекта, это то, что я использовал!

Оказывается, мне просто нужно было указать селектору правильный диапазон, а затем! Важные свойства градиента. Не лучшая практика, я знаю, но просто для этого раздела идеально! 

.hero-header span {background-image: linear-gradient(-45deg, #47bcc2, #bee9e8, #c4e7d4, #00bd9d, #8bd7d2)!important;
    background-size: 400% 400%!important;
 animation: gradient 15s ease infinite;
}

@keyframes gradient {
    0% {
        background-position: 0% 50%;
    }
    50% {
        background-position: 100% 50%;
    }
    100% {
        background-position: 0% 50%;
    }
}
...