x
 
Ваня Трёшников
19 июля 2018
Советы почтой каждую неделю
Пожалуйста, получите наше письмо, чтобы подтвердить свой адрес:
Вы подписаны на «Советы за неделю»:

Добрый день!

Можно ли достичь эффекта переливания без встраивания этого видео на сайт?


Увеличьте размер фона с градиентом и медленно двигайте, это даст эффект «переливания»:

<!-- index.html -->
<div class="gradient"></div>
/* style.css */
.gradient {
  padding-bottom: 100%;
  background-size: 500% 500%;
  background-image: linear-gradient(-45deg,
    #231557,
    #44107A,
    #FF1361,
    #FFF800
  );
  animation: move-background 30s linear infinite;
}

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

Если нужна анимация посложнее, воспользуйтесь кастомными свойствами и манипулируйте ими из яваскрипта:

/* style.css */
.gradient {
  width: 300px;
  height: 300px;
  animation: move-background 30s linear infinite;
  background-image: radial-gradient(
    var(--color1),
    var(--color2)
  )
}
/* script.js */

/* ... */
/* Код, изменяющий --color1 и --color2 */

Обновление. Как заметил Андрей Пулин в комментариях к предыдущему совету, можно поместить такой движущийся градиент в фон текста:

<!-- index.html -->
<div class="gradient">Заголовок с фоном</div>
/* style.css */
.gradient {
  /* ... */
  color: transparent;
  -webkit-background-clip: text;
}
Заголовок
с фоном
P. S. Это был совет о веб-разработке. Хотите знать всё о коде, тестах, фронтенд-разработке, цеэсэсе, яваскрипте, рельсах и джейде? Присылайте вопросы.
Вёрстка и прототипирование — дисциплина Школы дизайнеров. Набор открыт. Чем раньше поступите, тем ниже стоимость и выше шанс на бесплатное место.
 

Твитнуть
Поделиться
Поделиться
Отправить

Комментарии

Илья Стрельцын
9 августа 2018

Лучше не color: transparent, а -webkit-text-fill-color: transparent. Работает там же, где и -webkit-background-clip: text, а в неподдерживающих браузерах останется просто непокрашенный текст. А с предложенным вариантом заголовок в них просто пропадёт.


Цель рубрики — обсуждение вопросов дизайна всех видов, текста в дизайне и взаимоотношений дизайнеров с клиентами.

Мы публикуем комментарии, которые добавляют к уже сказанному новые мысли и хорошие примеры. Мы ожидаем, что такие комментарии составят около 20% от общего числа.

Решение о публикации принимается один раз; мы не имеем возможности комментировать или пересматривать свое решение, хотя оно может быть ошибочно. Уже опубликованные комментарии могут быть удалены через некоторое время, если без них обсуждение не становится менее ценным или интересным.

Вот такой веб 2.0.

обязательны полностью для публикации комментария
Электронная почта
адрес не будет опубликован
Ваши соображения
Иллюстрация
гиф или джипег шириной не более 700 пикселей
Как вы работаете с правками по вёрстке? Где трекаете? Простейший параллакс на ЦСС Какие фавыконки использовать в 2025? Что нового в ЦСС: text-box-trim




Недавно всплыло

«Редактировать» или «Изменить»? 1 Как правильно заимствовать чужой материал? 1 Все уже успели заметить, что вы почти во всех пятничных примерах советуете немного поунижаться 12 Почему в переписке нельзя использовать «Доброго времени суток»? 2