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

Question

ss44v @ss44v

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

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

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

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

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

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

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

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

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

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

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

HTML

+1 ещё

Простой
Как сделать одинаковую высоту у карточек?
- 1 подписчик
- 20 часов назад
- 106 просмотров
1

ответ
HTML

+1 ещё

Простой
Как внизу блока сделать маску волной и поместить туда изображение?
- 2 подписчика
- вчера
- 145 просмотров
2

ответа
CSS

+1 ещё

Средний
Веб форма: появилось свойство blur, как исправить на битриксе УС?
- 1 подписчик
- вчера
- 53 просмотра
0

ответов
JavaScript

+3 ещё

Простой
Как отключить swiper-bundle.min.css?
- 1 подписчик
- вчера
- 57 просмотров
2

ответа
JavaScript

+2 ещё

Простой
Мулти селект Dropdown. Как можно создать многослойный мулти селект?
- 1 подписчик
- 24 дек.
- 86 просмотров
1

ответ
JavaScript

+2 ещё

Простой
Почему window.scrollTo(0, document.body.scrollHeight); не работает?
- 1 подписчик
- 24 дек.
- 65 просмотров
0

ответов
CSS

Средний
Возможен ли отступ только второй строки CSS clamp?
- 1 подписчик
- 23 дек.
- 75 просмотров
1

ответ
JavaScript

+2 ещё

Простой
Как подключить 3D персонажа в three.js?
- 1 подписчик
- 23 дек.
- 68 просмотров
0

ответов
HTML

+1 ещё

Простой
Как сделать блок такой же формы?
- 1 подписчик
- 23 дек.
- 143 просмотра
1

ответ
HTML

+1 ещё

Простой
Как лучше сверстать элемент?
- 1 подписчик
- 23 дек.
- 131 просмотр
1

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

Верстальщик HTML

MST

от 450 $

Баннермейкер (html-5)/дизайнер-верстальщик/motion-дизайнер

BYTIME

от 130 000 ₽

Fullstack Developer под Wordpress

Future Search

от 90 000 до 150 000 ₽

Нарисовать арты

26 дек. 2024, в 23:03

500 руб./в час

Парсер Криптография. Работа с TLS-fingerprint

26 дек. 2024, в 21:50

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

Автоматизация ChatGPT и постинга

26 дек. 2024, в 21:01

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

Нашел такой код, но никак не получается интегрировать в свой код и цвета которые мне нужны
<!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?

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

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

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