Как анимировать rgb gradient?

Question

ss44v @ss44v

Как анимировать rgb gradient?

Доброго времени суток, помогите пожалуйста
Есть вот такой вот градиент

radial-gradient(ellipse at 35% 170%,#ee733f 30%,#d9442d 42%,#ab6588 88%);

и выглядит оно так:

нужно сделать его анимационным, переливающимся.

Как сделать? с помощью css? или svg файла
подскажите и помогите пожалуйста, буду очень сильно благодарен.

Вопрос задан более трёх лет назад
354 просмотра

6 комментариев

Подписаться 1 Оценить 6 комментариев

ss44v @ss44v Автор вопроса

Нашел такой код, но никак не получается интегрировать в свой код и цвета которые мне нужны

<!DOCTYPE html>
<html>
<head>
<script src="http://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
<meta charset=utf-8 />
<title>JS Bin</title>
</head>
<body>
  <div></div>
</body>
</html>

BODY {
  background: #EEE;
  padding: 30px;
}
DIV {
  height: 200px;
  background: crimson;
  box-shadow: 0 -150px 70px -120px teal inset,
              0 -220px 70px -120px yellowgreen inset,
              0 -280px 70px -120px gold inset;
  border-radius: 30px;
  border: 10px solid white;
  animation: background 4s infinite alternate;
}

@keyframes background {
  50% {
    background: darkviolet;
    box-shadow: 0 -140px 70px -120px mediumorchid inset,
                0 -210px 70px -120px teal inset,
                0 -280px 70px -120px plum inset;
  }
}

Написано более трёх лет назад

devstudent @devstudent

через css выйдет. только вы же keyframes не дописали. 50% - есть , а еще надо как минимум две точки - 0% и 100%. в них тоже пропишите какой будет фон или что вы там анимируете

Написано более трёх лет назад
devstudent @devstudent

а что не так? все анимироуется в вашем примере

Написано более трёх лет назад
devstudent @devstudent

https://jsfiddle.net/k6mjjz2p/

Написано более трёх лет назад
ss44v @ss44v Автор вопроса

devstudent: Я сделал, но он выдают цвета которые я не добавлял в код
мне нужно именно из 5-6 цветов, это можно как то реализовать?

Написано более трёх лет назад
devstudent @devstudent

ss44v: когда происходит анимация цветов, то есть ПЛАВНЫЙ переход от одного оттенка к другому, то , конечно, в это время появляются цвета, которых вы не добавляли, но которые добавит браузер, пытаясь сделать ПЛАВНЫЙ переход от одного оттенка к другому. это нормально. если сделать так как вы хотите, только 5-6 цветов, то они будут просто мигать, резко сменять друг друга, а не анимировано, плавно.

Написано более трёх лет назад

Пригласить эксперта

Ответы на вопрос 1

1 комментарий

Ваш ответ на вопрос

Войдите, чтобы написать ответ

Похожие вопросы

JavaScript

+2 ещё

Простой
Где можно увидеть реализацию такого эффекта при скролле?
- 1 подписчик
- 22 часа назад
- 132 просмотра
2

ответа
PHP

+1 ещё

Простой
Как исправить "Undefined array key «login»,"password" в $_POST?
- 1 подписчик
- вчера
- 92 просмотра
1

ответ
HTML

+2 ещё

Средний
Почему у меня не отображаются кнопки?
- 1 подписчик
- вчера
- 97 просмотров
2

ответа
HTML

+1 ещё

Простой
Правильно ли с точки зрения семантики БЭМ я расставляю wrapper'ы и вообще называю дивы?
- 1 подписчик
- вчера
- 94 просмотра
0

ответов
HTML

+1 ещё

Простой
Как установить одну и ту же ширину элементов в разных блоках?
- 1 подписчик
- 22 нояб.
- 73 просмотра
1

ответ
HTML

+1 ещё

Простой
Как расположить контент сайта на всю высоту?
- 1 подписчик
- 22 нояб.
- 55 просмотров
1

ответ
HTML

+1 ещё

Простой
Паддинг и Маргин ломает длину и ширину, не получается выставить отступы внутри блока?
- 1 подписчик
- 22 нояб.
- 61 просмотр
1

ответ
CSS

Простой
Можно ли в CSS сгладить углы при использовании border-radius?
- 1 подписчик
- 22 нояб.
- 100 просмотров
1

ответ
CSS

+2 ещё

Простой
Как корректно настроить Gulp + Sass?
- 1 подписчик
- 21 нояб.
- 83 просмотра
2

ответа
HTML

Простой
Почему некорректно отражается текстареа в Osclass evolution?
- 1 подписчик
- 21 нояб.
- 35 просмотров
0

ответов
Показать ещё Загружается…

Fullstack Developer под Wordpress

Future Search

от 90 000 до 150 000 ₽

WordPress-разработчик

div. • Ставрополь

от 50 000 до 120 000 ₽

JavaScript FullStack разработчик

Rocket • Смоленск

от 80 000 до 130 000 ₽

Разработать нативное мобильное приложение на Swift и Kotlin

24 нояб. 2024, в 22:14

250000 руб./за проект

Маркетплейс в МЕДИЦИНСКОЙ тематике

24 нояб. 2024, в 21:55

200000 руб./за проект

Нужно подобие hamster combat

24 нояб. 2024, в 21:41

1000 руб./за проект

Нашел такой код, но никак не получается интегрировать в свой код и цвета которые мне нужны
<!DOCTYPE html> <html> <head> <script src="http://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script> <meta charset=utf-8 /> <title>JS Bin</title> </head> <body> <div></div> </body> </html>

BODY { background: #EEE; padding: 30px; } DIV { height: 200px; background: crimson; box-shadow: 0 -150px 70px -120px teal inset, 0 -220px 70px -120px yellowgreen inset, 0 -280px 70px -120px gold inset; border-radius: 30px; border: 10px solid white; animation: background 4s infinite alternate; } @keyframes background { 50% { background: darkviolet; box-shadow: 0 -140px 70px -120px mediumorchid inset, 0 -210px 70px -120px teal inset, 0 -280px 70px -120px plum inset; } }
через css выйдет. только вы же keyframes не дописали. 50% - есть , а еще надо как минимум две точки - 0% и 100%. в них тоже пропишите какой будет фон или что вы там анимируете
а что не так? все анимироуется в вашем примере
devstudent: Я сделал, но он выдают цвета которые я не добавлял в код
мне нужно именно из 5-6 цветов, это можно как то реализовать?
ss44v: когда происходит анимация цветов, то есть ПЛАВНЫЙ переход от одного оттенка к другому, то , конечно, в это время появляются цвета, которых вы не добавляли, но которые добавит браузер, пытаясь сделать ПЛАВНЫЙ переход от одного оттенка к другому. это нормально. если сделать так как вы хотите, только 5-6 цветов, то они будут просто мигать, резко сменять друг друга, а не анимировано, плавно.

Answer 1 · 2017-06-22 15:34:26

Flur @aslanovich

Web/Art Designer. Front+Back-end Geek

По аналогии сделайте

Ответ написан более трёх лет назад

1 комментарий

Как анимировать rgb gradient?

Войдите, чтобы написать ответ

Минуточку внимания

Войдите на сайт