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

Question

ss44v @ss44v

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

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

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

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

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

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

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

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 комментарий

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

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

Войти через центр авторизации

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

PHP

+2 ещё

Средний
Некорректная работа submit?
- 1 подписчик
- 7 часов назад
- 35 просмотров
0

ответов
HTML

+2 ещё

Простой
Media запросы, нужно менять каждые 10px. Может проблема в коде?
- 2 подписчика
- 8 часов назад
- 257 просмотров
0

ответов
HTML

Простой
Не получается поставить поисковую строку справа, что сделать чтобы исправить?
- 1 подписчик
- 10 часов назад
- 41 просмотр
0

ответов
HTML

Простой
С чем может быть связано не правильный вывод изображений?
- 1 подписчик
- 14 часов назад
- 155 просмотров
1

ответ
JavaScript

+1 ещё

Средний
Как задать img источник из svg inline?
- 1 подписчик
- 17 часов назад
- 100 просмотров
1

ответ
JavaScript

+2 ещё

Простой
Смена стилей шапки сайта при скролле к определенному блоку? Стили должны применяться при скролле до блока и отменяться за его пределами?
- 1 подписчик
- 18 часов назад
- 52 просмотра
1

ответ
JavaScript

+1 ещё

Средний
Как сделать так, чтобы клик по object передавался родителю?
- 1 подписчик
- 22 часа назад
- 96 просмотров
2

ответа
CSS

Простой
Почему line-clamp для обрезания строк отображает текст ниже троеточия?
- 1 подписчик
- вчера
- 57 просмотров
1

ответ
HTML

+1 ещё

Простой
Можно ли изменить цвет шрифта снаружи для тега у которого цвет прописан внутри?
- 1 подписчик
- вчера
- 64 просмотра
2

ответа
JavaScript

+4 ещё

Средний
Как сделать правильное динамическое масштабирование ion-range в зависимости от ширины колонок линии со значениями?
- 1 подписчик
- 23 апр.
- 52 просмотра
0

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

Тестировщик-стажёр

ITooLabs • Тула

от 35 000 до 40 000 ₽

Fullstack PHP Developer

Smapse Education

от 40 000 до 65 000 ₽

Trainee - IT Support

move2usajobs.com LLC • Лос-Анджелес

от 2 000 до 4 000 $

Найти ошибку flutter_map

26 апр. 2024, в 05:31

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

Разработать электронику для весов с Wi-Fi

26 апр. 2024, в 01:22

1000 руб./в час

Очень срочно нужно помочь запустить программу с UI

26 апр. 2024, в 00:13

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?

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

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

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