Как я могу воспроизвести этот конкретный анимированный градиент (синий до пурпурного) в HTML/CSS, реагировать или трепетHtml

Программисты Html
Ответить
Anonymous
 Как я могу воспроизвести этот конкретный анимированный градиент (синий до пурпурного) в HTML/CSS, реагировать или трепет

Сообщение Anonymous »

Я пытаюсь воспроизвести конкретный анимированный фон градиента, похожий на это изображение, но я не могу получить цвета, направление или анимацию вполне правильно. Html /css: < /p>

Код: Выделить всё

* {
margin: 0;
padding: 0;
box-sizing: border-box;
}

body,
html {
height: 100%;
overflow: hidden;
}

.gradient-container {
width: 100vw;
height: 100vh;
background: linear-gradient(135deg, #1a237e 0%, #3f51b5 25%, #673ab7 50%, #9c27b0 75%, #e91e63 100%);
background-size: 200% 200%;
animation: gradientShift 8s ease-in-out infinite;
}

@keyframes gradientShift {

0%,
100% {
background-position: 0% 50%;
}

50% {
background-position: 100% 50%;
}
}< /code>


I’d appreciate:
  • Feedback on how to make the gradient match the image more closely
  • Alternative implementations in React or Flutter if that’s easier
  • Any tips on achieving smoother or более яркие переходы


Подробнее здесь: https://stackoverflow.com/questions/797 ... n-html-css
Ответить

Быстрый ответ

Изменение регистра текста: 
Смайлики
:) :( :oops: :roll: :wink: :muza: :clever: :sorry: :angel: :read: *x)
Ещё смайлики…
   
К этому ответу прикреплено по крайней мере одно вложение.

Если вы не хотите добавлять вложения, оставьте поля пустыми.

Максимально разрешённый размер вложения: 15 МБ.

Вернуться в «Html»