|
Руст Кулматов
|
||||||||
|
Увеличьте размер фона с градиентом и медленно двигайте, это даст эффект «переливания»: |
||||||||
<!-- 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. Это был совет о
|