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

Question

ss44v @ss44v

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

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

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

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

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

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

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

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 цветов, то они будут просто мигать, резко сменять друг друга, а не анимировано, плавно.

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

Помогут разобраться в теме Все курсы

Яндекс Практикум

Профессиональная вёрстка на HTML и CSS

3 месяца

Далее
Stepik

Основы HTML и CSS

2 недели

Далее
OTUS

HTML/CSS

3 месяца

Далее

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

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

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

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

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

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

HTML

Простой
При клике на кастомную кнопку “Скачать” не происходит переход, хотя JS-обработчик отрабатывает. Как решить?
- 1 подписчик
- вчера
- 117 просмотров
1

ответ
HTML

+1 ещё

Простой
Как создать карточки в рядах со смещением?
- 1 подписчик
- 28 окт.
- 81 просмотр
1

ответ
CSS

Простой
Как на css сделать в карточке товара появление блока кнопок при наведении курсора?
- 1 подписчик
- 27 окт.
- 126 просмотров
1

ответ
CSS

Простой
Как такое сверстать?
- 1 подписчик
- 26 окт.
- 265 просмотров
2

ответа
Дизайн

Средний
Какие есть отличия дизайна писем от веб-дизайна?
- 1 подписчик
- 22 окт.
- 163 просмотра
2

ответа
CSS

Простой
Поему не срабатывает стиль шрифта?
- 1 подписчик
- 20 окт.
- 172 просмотра
0

ответов
CSS

+1 ещё

Простой
Почему после изменений в css на сайте нет изменений?
- 1 подписчик
- 13 окт.
- 229 просмотров
3

ответа
CSS

Простой
Как выровнять в гриде по горизонтали?
- 1 подписчик
- 13 окт.
- 167 просмотров
1

ответ
HTML

+1 ещё

Простой
Как в руководстве steam сделать обтекающий картинку текст?
- 1 подписчик
- 08 окт.
- 133 просмотра
1

ответ
CSS

+2 ещё

Средний
Как решить проблему с появлением пустого пространства под drawer из shadcn?
- 2 подписчика
- 02 окт.
- 106 просмотров
1

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

Верстальщик / фронтендер для браузерного расширения

DevTeam.Space

от 1 000 до 2 000 $

Специалист технической поддержки (чат)

WebSoft

от 50 000 до 70 000 ₽

Middle Frontend-разработчик

Польза

от 120 000 до 160 000 ₽

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

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

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

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