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

Question

ss44v @ss44v

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

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

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

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

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

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

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

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

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

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

Нетология

Веб-разработчик с нуля: профессия с выбором специализации

14 месяцев

Далее
Академия Эдюсон

Frontend-разработчик: тариф PRO

10 месяцев

Далее
ProductStar × РБК

Профессия: Инженер по тестированию

6 месяцев

Далее

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

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

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

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

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

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

HTML

+1 ещё

Простой
Как свг заменить на фон?
- 1 подписчик
- 08 мая
- 174 просмотра
1

ответ
HTML

+1 ещё

Простой
Чем препроцессить в HTML сокращения?
- 2 подписчика
- 04 мая
- 236 просмотров
1

ответ
CSS

Простой
Filter: blur() размывает края при градиентном размытие?
- 1 подписчик
- 03 мая
- 115 просмотров
1

ответ
JavaScript

+1 ещё

Простой
Почему у поля input атрибут required не срабатывает?
- 2 подписчика
- 01 мая
- 298 просмотров
2

ответа
JavaScript

+1 ещё

Простой
Как обновлять данные массива, чтобы по нажатию на кнопку на странице добавлялся еще один элемент массива?
- 3 подписчика
- 12 апр.
- 730 просмотров
4

ответа
JavaScript

+1 ещё

Простой
Почему не работает код из js файла?
- 3 подписчика
- 12 апр.
- 687 просмотров
4

ответа
HTML

+1 ещё

Простой
Беда с input. Как избавиться от выделения заполненного поля?
- 2 подписчика
- 31 мар.
- 348 просмотров
1

ответ
HTML

Простой
Как сделать так, чтобы в браузерах код html не показывался в квадратиках?
- 4 подписчика
- 26 мар.
- 684 просмотра
3

ответа
HTML

Простой
Как сделать деплой проекта, статического сайта сделанного на чистом html у которого нет баз данных?
- 1 подписчик
- 26 мар.
- 259 просмотров
3

ответа
HTML

+1 ещё

Простой
Как менять тему письма при рассылке на почту в зависимости от темы устройства?
- 2 подписчика
- 25 мар.
- 263 просмотра
1

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

Frontend-разработчик (vanilla JS, high-load)

Karma8

от 200 000 ₽

Специалист тех поддержки (английский язык, смены с 16:00 до 00:00 Мск)

ТехСофт

от 50 000 ₽

Разработчик JavaScript/NodeJS, специалист технической поддержки

A-Parser

от 800 до 800 $

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

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

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

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