Радиальный градиент css3: Радиальный градиент | htmlbook.ru

Содержание

Видео курс HTML 5, CSS и созданию сайтов. Псевдоклассы и градиенты

  • Главная >
  • Каталог >
  • HTML5 и CSS3 Базовый >
  • Псевдоклассы и градиенты

Для прохождения теста нужно авторизироваться

Войти Регистрация

×

Вы открыли доступ к тесту! Пройти тест

Войдите или зарегестрируйтесь для того чтоб продолжить просмотр бесплатного видео

Войти Регистрация

№1

Знакомство с курсом HTML5&CSS3

0:06:43

Материалы урокаДомашние заданияТестирование

В этом курсе Вы познакомитесь с новыми возможностями HTML5 и CSS3, поймете, чем они отличаются от более старых версий. Выучите новые технологии, которые позволят вам размещать музыку, видео, а так же определять местонахождения пользователя. После курса Вы не только сможете усовершенствовать свой сайт, но и улучшить его визуальную часть, добавив анимацию, трехмерные эффекты с помощью стилей CSS.

Читать дальше…

№2

Введение в HTML5

1:17:46

Материалы урокаДомашние заданияТестирование

В этом курсе вы познакомитесь с новыми возможностями HTML5 и CSS3, поймете, чем они отличаются от более старых версий. Выучите новые технологии, которые позволят вам размещать музыку, видео, а также определять местонахождения пользователя. После изучения курса вы также сможете совершенствовать визуальную часть своего сайта путем добавления анимации, трехмерных эффектов и адаптивности с помощью стилей CSS.

Читать дальше…

HTML5 формы. Теги video и audio.

1:36:34

Материалы урокаДомашние заданияТестирование

На сайтах часто размещаются видео материалы, а на некоторых сайтах необходимы инструменты для воспроизведения звуковых файлов. В HTML5 появляется ряд элементов, с помощью которых упрощается создание мультимедийных страниц с использованием аудио или видео. Для этого урока Вам потребуются базовые знания JаvaScript для того, чтобы контролировать воспроизведение мультимедийного контента в HTML5 странице. Также Вы узнаете, как можно кодировать звук и видео различными кодеками для поддержки воспроизведения в разных браузерах. Во второй части урока будут рассмотрены новые элементы форм, которые позволяют упросить создание страниц регистрации, авторизации и других элементов взаимодействия с пользователем.

Читать дальше…

Микроданные и геолокация

1:16:53

Материалы урокаДомашние заданияТестирование

Микроданные – это новый подход в создании дополнительной описательной информации для HTML документа. С помощью микроданных мы можем в HTML странице, кроме самой структуры документа, сохранить специальную информацию, которая будет полезная поисковым системам и другим приложениям, анализирующим документы. В этом уроке Вы узнаете, как использовать микроданные и словари микроданных в HTML5. Вторая часть урока будет посвящена геолокации. Вы научитесь создавать приложения, которые смогут получить координаты пользователя и определить его текущее положение. Вы узнаете, как можно комбинировать Geolocation API и Google карты.

Читать дальше…

Canvas

1:25:22

Материалы урокаДомашние заданияТестирование

Один из самых популярных и известных элементов HTML5 – это canvas. С использованием canvas уже написано много бизнес приложений и браузерных игр. С помощью canvas и JavaScript кода frontend разработчик теперь может генерировать графику на стороне клиента. Canvas сложный и очень мощный элемент в HTML5, в этом уроке Вы увидите примеры работы с графикой на стороне клиента, научитесь создавать анимацию и различные эффекты.

Читать дальше…

WebStorage, WebWorkers, Offline Applications

1:27:29

Материалы урокаДомашние заданияТестирование

В этом уроке Вы узнаете о новых функциях HTML5 для хранения данных в браузере клиента. Вы узнаете, что такое localStorage и sessionStorage. Увидите основные отличия веб хранилищ от cookie-файлов. Этот урок также будет полезным для тех, кто хочет научиться создавать JavaScript сценарии, выполняющие сложные вычисления. Вторая часть урока посвящена спецификации Web Worker. Вы научитесь использовать многопоточное программирование в JavaScript. Третья часть урока будет посвящена созданию автономных приложений, которые могут работать без доступа к Интернет. HTML5 Offline Application – это новый механизм, который позволяет создать приложения, близкие к обычным настольным приложениям. И в этом уроке Вы узнаете, как это делать.

Читать дальше…

№7

Введение в CSS3

1:07:58

Материалы урокаДомашние заданияТестирование

Любой FrontEnd разработчик знает, что такое CSS, но не каждый умеет пользоваться возможностями, которые появились в CSS3 – новой версии формального языка определения стиля документа. С помощью всего нескольких инструкций теперь можно делать сложные графические эффекты, которые раньше занимали много времени. В этом уроке Вы узнаете общие сведения о состоянии спецификации CSS3 и о том, в каких браузерах поддерживается CSS3. Также Вы узнаете о том, какие новые селекторные функции были введены в CSS3, какие изменения коснулись свойств, с помощью которых задаются цвета, фоновые изображения и рамки элементов.

Читать дальше…

Web Fonts и стили для текста

0:38:40

Материалы урокаДомашние заданияТестирование

Использование дизайнерских шрифтов в веб приложениях всегда было проблемой, так как шрифт для корректной работы страницы должен был быть установлен на компьютере посетителя сайта. Теперь с использованием веб шрифтов мы можем использовать любой шрифт в документе, не опасаясь того, что текст будет не красиво отображаться в браузерах пользователей. Также в этом уроке Вы научитесь оформлять текстовые блоки – устанавливать тень для текста, разбивать текст на несколько колонок и генерировать текст с помощью CSS правил и псевдоэлементов.

Читать дальше. ..

Псевдоклассы и градиенты

0:57:31

Материалы урокаДомашние заданияТестирование

Псевдоклассы – элементы CSS правил, с помощью которых можно определить оформление элементов, которые изменили свое состояние из-за действий пользователя или других причин. Например, с помощью псевдоклассов, мы можем определить стиль элемента, который будет применен только в том случае, если пользователь навел курсор на элемент. В CSS3 появилось очень много псевдоклассов, которые позволяют легко оформлять документ. В этом уроке Вы узнаете о всех псевдоклассах, описанных в новой спецификации, а также узнаете, как можно создавать градиенты в CSS и как заставить старые браузеры отображать CSS эффекты.

Читать дальше…

Трансформации и анимация

0:52:57

Материалы урокаДомашние заданияТестирование

Анимация — одна из задач, которые обычно решаются с помощью JavaScript библиотек. В этом уроке будут рассмотрены свойства, которые позволяют без применения дополнительного кода, с помощью только одного CSS, создать анимационные эффекты. В этом уроке будут рассмотрены два возможных способа анимации – через свойство transition и через свойство animation. Также Вы узнаете о том, как работают трансформации в CSS. Вы научитесь использовать трансформации translate, rotate, scale, skew и даже трансформировать объекты в трехмерном пространстве, создавая интересные эффекты для страниц.

Читать дальше…

LESS и адаптивный дизайн

1:01:11

Материалы урокаДомашние заданияТестирование

Синтаксис CSS имеет много недостатков – разработчик не может создавать переменные, создавать блоки стилей и повторно их использовать как обычные функции, использовать арифметические операции в стилях. Все перечисленные выше недостатки можно убрать, применив библиотеку LESS для добавления в CSS дополнительной динамики. В этом уроке Вы узнаете, как подключить LESS и изучите основные возможности этой библиотеки. Во второй части урока будет рассмотрено понятие адаптивного дизайна на примере небольшой веб страницы, которая будет адаптироваться под размеры браузера для того, чтобы корректно отображаться на любом устройстве – персональном компьютере, планшете или мобильном телефоне.

Читать дальше…

ПОКАЗАТЬ ВСЕ

основные темы, рассматриваемые на уроке

0:00:00

Псевдоклассы и псевдоэлементы. Определение и синтаксис

0:02:55

Псевдоклассы, рассматриваемые на уроке

0:03:15

«:checked» (checkbox или radio в выбранном состоянии)

0:04:47

«:defualt» (стиль кнопки по умолчанию)

0:05:47

«:disabled» (неактивный элемент)

0:06:42

«:enabled» (активный элемент)

0:09:16

«:empty» (псевдокласс, не содержащий дочерних элементов)

0:10:37

«:first-of-type» (первый элемент в списке дочерних элементов)

0:12:00

«:last-of-type» (последний элемент в списке дочерних элементов)

0:12:36

«:indeterminate» (элементы checkbox в неопределенном состоянии)

0:14:27

«:valid», «:invalid» (корректные и некорректные значения)

0:16:33

«:first-child», «:last-child» (первый и последний элемент контейнера)

0:17:56

«:not» (возможность создания исключающего правила)

0:19:38

«:nth-of-child» (доступ к эл-там по расположению в дереве документа)

0:22:58

«:nth-of-last-child» (доступ к элементам документа, обход с конца)

0:24:24

«:nth-of-type» (порядковый номер конкретного селектора)

0:27:24

«:only-of-type» (если элемент один в родительском контейнере)

0:28:44

«:only-child» (если элемент единственный в родительском контейнере)

0:29:32

«:optional» (для необязательных для заполнения полей)

0:30:58

«:required» (для обязательных для заполнения полей)

0:34:33

«:read-write», «:read-only» (до- и недоступные эл-ты для редактирования)

0:35:15

«:root» (корневой элемент)

0:36:14

Немного повторения

0:42:20

Градиенты в CSS3

0:43:42

Линейный градиент

0:49:09

Радиальный градиент

0:51:49

Повторяющиеся градиенты

0:53:45

Сolorzilla. com

0:54:30

Градиент в IE6

ПОКАЗАТЬ ВСЕ

Рекомендуемая литература

Изучаем HTML, XHTML и CSS Элизабет Фримен, Эрик Фримен

HTML5 и CSS3. Веб-разработка по стандартам нового поколения Брайан Хоган

Титры видеоурока

Титров к данному уроку не предусмотрено

ПОДРОБНЕЕ

ПОДРОБНЕЕ

ПОДРОБНЕЕ

Руководство по добавлению градиентов с помощью Tailwind CSS

Вам нужно подробное руководство по добавлению градиентов с помощью Tailwind CSS? Может быть, вы хотите создать красивый текстовый градиент для главного раздела вашего веб-сайта или добавить привлекательный градиент границы для карточек вашего сайта.

Вам повезло! Недавно я экспериментировал с градиентами в Tailwind CSS и подумал, что было бы интересно написать руководство по их добавлению.

В этом блоге мы будем использовать Tailwind CSS для создания красивых градиентов фона, текста, границ и подчеркивания. Мы также рассмотрим, как анимировать градиенты в Tailwind CSS. Давайте начнем!

  • Введение в CSS-градиенты Tailwind
  • Как добавить линейные градиенты фона в Tailwind CSS
  • Настройка CSS-градиентов Tailwind с более чем двумя точками цвета
  • Добавление радиальных фоновых градиентов
  • Добавление текстовых градиентов
  • Как добавить градиенты границ в Tailwind CSS
    • Градиент границы кнопки
    • Градиент границы ввода
    • Градиент границы карты
  • Добавление градиентного подчеркивания
  • Как анимировать градиенты в Tailwind CSS
    • Кнопки градиентной фоновой анимации
    • Анимация градиента границы ввода
    • Градиент подчеркивания анимации

Введение в CSS-градиенты Tailwind

Градиенты — отличный способ добавить яркости вашим веб-сайтам. Но они больше не только для фона — мы можем добавлять градиенты к любому элементу, включая текст, границы, карточки, элементы ввода и так далее!

Перед тем, как углубиться в CSS-градиенты Tailwind и написать несколько интересных вещей, нам нужно понять основы CSS-градиентов Tailwind и то, как они работают.

Чтобы создать базовый градиент в Tailwind CSS, нам нужно использовать эти три класса Tailwind CSS:

  1. bg-градиент-к-{направлению}
  2. от-{цвет}
  3. к-{цвет}

Давайте обсудим первый. bg-gradient-to-{direction} определяет направление градиента. направление может быть горизонтальным, вертикальным или диагональным.

Горизонтальный линейный градиент имеет два класса:

  1. bg-gradient-to-r : определяет горизонтальный линейный градиент (HLG) слева направо
  2. bg-gradient-to-l : определяет HLG справа налево

Вертикальный линейный градиент также имеет два класса:

  1. bg-gradient-to-t : определяет вертикальный линейный градиент (VLG) снизу вверх
  2. bg-gradient-to-b : определяет VLG сверху вниз

Наконец, диагональный градиент имеет четыре класса:

  1. bg-gradient-to-tr
    : определяет диагональный линейный градиент (DLG) снизу слева вверх справа
  2. bg-gradient-to-tl : определяет DLG снизу справа вверху слева
  3. bg-gradient-to-br : определяет DLG сверху слева вниз справа
  4. bg-gradient-to-bl : определяет DLG от верхнего правого до нижнего левого

Далее у нас есть from-{color} . Это определяет начальный цвет градиента. Мы можем использовать любой класс Tailwind CSS color в качестве начального цвета для градиента, например from-purple-500 .

Наконец, у нас есть to-{color} . Это определяет конечный цвет градиента. Мы можем использовать любой класс Tailwind CSS color в качестве конечного цвета для градиента, например to-purple-800 .

Как добавить линейные градиенты фона в Tailwind CSS

Мы узнали об основных классах CSS-градиента Tailwind. Теперь давайте воспользуемся этими знаниями для создания линейного фонового градиента.

Для начала нам понадобится контейнер div . Давайте сначала создадим его и зададим ему высоту:

.
 <дел>
 

Следующее, что нам нужно сделать, это добавить фоновый градиент. Давайте добавим простой линейный градиент, указав CSS-классы from-{color} и to-{color} Tailwind.

В этом примере мы создадим линейный градиент от от фиолетового-600 до до синего-600 . Давайте добавим эти классы:

 <дел>
 

Далее нам нужно указать направление с помощью класса bg-gradient-to-{direction} . Это сообщает Tailwind CSS, в каком направлении он должен течь.


Более 200 000 разработчиков используют LogRocket для улучшения цифрового взаимодействия

Подробнее →


В этом примере мы хотим, чтобы поток шел слева направо, поэтому мы добавим класс bg-gradient-to-r :

 <дел>
 

В приведенной ниже демонстрации вы должны увидеть линейный градиент фона:

См. Фоновый градиент Pen
от Rishi Purwar (@rishi111)
на CodePen.

Попробуем изменить направление градиента слева направо сверху вниз. Чтобы изменить направление, нам нужно заменить bg-gradient-to-r на 9Класс 0053 с классом bg-gradient-to-b :

 <дел>
 

Вы можете видеть, что градиент теперь течет сверху вниз, а не слева направо:

См. Градиент фона пера
: сверху вниз от Риши Пурвара (@rishi111)

на CodePen.

Подсказка: если мы хотим создать эффект блеклого градиента, нам не нужно добавлять класс to-{color} . Нам нужно использовать только bg-gradient-to-{direction} и from-{color} для создания эффекта выцветшего градиента в Tailwind CSS.

Настройка CSS-градиентов Tailwind с более чем двумя точками цвета

В этом разделе мы рассмотрим, как можно создавать градиенты в Tailwind CSS с более чем двумя точками цвета. Это позволяет нам делать более красочные и яркие градиенты.

До сих пор мы использовали только две точки цвета: from-{color} и to-{color} . Теперь, чтобы добавить третью точку цвета в наш градиент, мы будем использовать класс via-{color} вместе с классами from-{color} и to-{color} , чтобы добавить средний цвет.

Давайте сделаем это, используя наш предыдущий пример. Ваш код должен выглядеть так:

 <дел>
 

В этой демонстрации вы можете увидеть фоновый градиент с тремя точками цвета в действии:

См. Градиент фона пера
: более двух цветовых остановок от Риши Пурвара (@rishi111)
на CodePen.

Добавление радиальных градиентов фона

Далее мы узнаем, как добавить радиальные градиенты фона в Tailwind CSS. Как вы уже знаете, в Tailwind CSS нет прямых классов для создания радиального градиента. Вместо этого нам нужно сделать некоторую настройку, чтобы добавить его поддержку. Давайте начнем!

Первое, что нам нужно сделать, это добавить поддержку радиального градиента. Мы делаем это, расширяя свойство темы, добавляя следующий код в наш файл tailwind.config.js :

 модуль.экспорт = {
  содержимое: ["./src/**/*.{js,jsx}"],
  тема: {
    продлевать: {
      фоновая картинка: {
        'радиальный градиент': 'радиальный градиент (var (--tw-gradient-stops))',
      }
    }
  }
}
 

Теперь мы готовы приступить к созданию нашего первого радиального фонового градиента!

Сначала скопируйте и вставьте окончательный код из последнего раздела:

 <дел>
 

Чтобы создать радиальный градиент фона, нам нужно заменить bg-gradient-to-r классом bg-gradient-radial , чтобы добавить радиальный градиент фона:

 <дел>
 

На изображении ниже вы можете увидеть радиальный градиент фона с тремя точками цвета:

Добавление текстовых градиентов

Текстовые градиенты — отличный способ добавить яркости вашему тексту. В этом разделе мы узнаем, как добавить текстовые градиенты в Tailwind CSS.

Для начала нам понадобится тег h2 . Давайте сначала создадим его и придадим ему базовый стиль.

  

Руководство по добавлению градиентов с помощью Tailwind CSS

Следующее, что нам нужно сделать, это добавить фоновый градиент к нашему тексту. Давайте добавим простой линейный градиент, указав точки цвета. Мы будем использовать те же цвета, что и в предыдущем примере, 9.0052 от фиолетового-600 через розовый-600 до синего-600 .

Далее нам нужно указать направление градиента с помощью класса bg-gradient-to-r . Добавьте эти классы.

  

Руководство по добавлению градиентов с помощью Tailwind CSS

Вы должны увидеть что-то вроде этого:

Как мы видим, градиент фона применяется в качестве фона для нашего текста вместо градиента текста. Итак, как заставить его работать?

Чтобы получить желаемый эффект, нам нужно использовать CSS-класс bg-clip-text Tailwind, который позволяет нам обрезать фон элемента.

В нашем случае мы хотим обрезать фон тега h2 , чтобы он соответствовал форме текста. Идите вперед и добавьте этот класс:

  

Руководство по добавлению градиентов с помощью Tailwind CSS

Здесь мы обрезали фон элемента, но не видим градиент текста. Это потому, что черный цвет текста перекрывается с фоновым градиентом. Чтобы скрыть это, нам нужно использовать text-transparent класс, чтобы сделать цвет текста прозрачным. Идите вперед и добавьте этот класс:

  

Руководство по добавлению градиентов с помощью Tailwind CSS

Отлично! Вы можете увидеть текстовый градиент в действии в этой демонстрации:

См. Текстовый градиент CSS Pen
Tailwind от Rishi Purwar (@rishi111)
на CodePen.

Как добавить градиенты границ в Tailwind CSS

В этом разделе мы рассмотрим, как добавить градиенты границ в Tailwind CSS к кнопке и элементу ввода. Мы также увидим, как можно добавить градиентные границы вокруг компонента карточки.

Градиент границы кнопки

Во-первых, давайте посмотрим, как мы можем добавить градиент границы к элементу кнопки. Давайте создадим кнопку с базовым стилем CSS Tailwind:

.
 <кнопка>
  Следуй за мной

 

Затем добавьте к кнопке градиентный фон, используя классы фонового градиента, которые мы видели в предыдущих разделах:

 <кнопка>
  Следуй за мной

 

Кнопка должна выглядеть так:

Теперь нам нужно добавить класс bg-white к тегу span, чтобы скрыть градиентный фон кнопки. Нам также нужно добавить отступ к элементу кнопки, чтобы создать границу вокруг тега span . Идем дальше и добавляем эти классы:

 <кнопка>
  Следуй за мной

 

В этой демонстрации вы можете увидеть кнопку с градиентной рамкой:

Градиент границы ввода

Далее мы рассмотрим, как добавить градиентную рамку вокруг входного тега . Это может быть немного сложно.

Во-первых, давайте создадим ввод с базовым стилем:

 <дел>
  
  

Используя классы фонового градиента, давайте добавим фоновый градиент к тегу div :

 <дел>
  
  

Вы должны увидеть что-то вроде этого:

В данный момент мы не видим никакого градиентного фона. Это связано с тем, что фон input перекрывает градиент фона div .

Чтобы сделать границу градиента видимой, нам нужно добавить отступ к элементу div , чтобы создать границу вокруг ввод тега . Идем дальше и добавляем p-1 класс:

 ><дел>
  
  

🤩 Волшебство! Теперь мы можем видеть градиентную границу вокруг тега input !

Так что именно мы сделали?

Мы добавили пространство внутри div , используя класс p-1 . Это сделало градиент фона div видимым только в пространстве, которое отображается как граница вокруг ввод тега .

Вы можете увидеть элемент ввода с градиентной рамкой в ​​демонстрации ниже:

См. ввод CSS Pen
Tailwind с градиентом границы от Rishi Purwar (@rishi111)
на CodePen.

Градиент границы карты

Теперь давайте посмотрим, как можно добавить градиент границы вокруг компонента карточки. Добавление градиентной рамки вокруг компонента карты похоже на то, что мы видели в предыдущем разделе, поэтому давайте сначала создадим компонент карты с базовым стилем. Просто скопируйте и вставьте следующий HTML-код в свой HTML-файл:

 <артикул>
  <дел>
     
Поднимите свои навыки веб-разработки на новый уровень!
Посетите CodingSpace↗

Это создаст компонент карты с базовым стилем CSS Tailwind, который выглядит примерно так:

Давайте добавим к этой карточке градиентный фон, добавив классы градиента в тег article . Идем дальше и добавляем эти классы:

 <артикул>
  <дел>
     
Поднимите свои навыки веб-разработки на новый уровень!
Посетите CodingSpace↗

Теперь компонент карты должен выглядеть так:

Угадайте, каким должен быть следующий шаг?🤔

Мы сделаем фон div белым, чтобы скрыть за ним градиентный фон. Мы также добавим отступ к тег article с использованием класса p-1. 5 для создания границы вокруг элемента div .

Давайте добавим эти классы, чтобы создать градиентную рамку вокруг компонента карты:

 <артикул>
  <дел>
     
Поднимите свои навыки веб-разработки на новый уровень!
Посетите CodingSpace↗

Теперь компонент карты должен выглядеть так:

См. компонент карты CSS Pen
Tailwind с градиентом границы от Rishi Purwar (@rishi111)
на CodePen.

Добавление подчеркивания градиента

В этом разделе мы узнаем, как добавить градиентное подчеркивание к некоторому тексту в Tailwind CSS. Во-первых, давайте создадим тег h2 с базовым стилем:

.
  

Повысьте уровень своих навыков веб-разработки, посетите

CodingSpace

Мы должны увидеть что-то вроде этого:

Теперь давайте добавим градиентный фон к тегу привязки . Добавьте классы фонового градиента Tailwind CSS, например:

.
  

Повысьте уровень своих навыков веб-разработки, посетите

CodingSpace

Вы должны увидеть что-то вроде этого:

Давайте зададим ширину и высоту фоновому градиенту. Мы собираемся использовать произвольную значение background-size , например bg-[length:100%_6px] , чтобы задать ширину 100% и высоту 6px . Если вы не знакомы с произвольными значениями, вы можете обратиться к документации по CSS Tailwind, чтобы узнать о них больше.

Нам также нужно добавить класс bg-no-repeat , чтобы предотвратить повторение градиентного фона:

  

Повысьте уровень своих навыков веб-разработки, посетите

CodingSpace

Теперь вы должны увидеть что-то вроде этого:

Последнее, что нам нужно сделать, это изменить положение этого фона вниз, используя класс bg-bottom :

  

Повысьте уровень своих навыков веб-разработки, посетите

CodingSpace

Теперь вы можете видеть подчеркивание градиента под текстом!

См. перо
Попутный ветер Градиент подчеркивания CSS от Rishi Purwar (@rishi111)
на CodePen.

Как анимировать градиенты в Tailwind CSS

Анимация в TailwindCSS может добавить веселья и значимости в ваши проекты! В этом разделе мы узнаем, как анимировать градиенты в Tailwind CSS при наведении и фокусе для создания красивых анимационных эффектов. По сути, мы будем анимировать компоненты, которые мы уже создали в этой статье.

Анимация градиента фона кнопки

Во-первых, мы посмотрим, как анимировать фон компонента кнопки, который мы уже создали. Скопируйте и вставьте окончательный код из раздела градиента границы кнопки:

 <кнопка>
  Следуй за мной

 

Чтобы добавить градиентный фон при наведении, нам нужно использовать псевдокласс Tailwind CSS hover: . В состоянии наведения мы сделаем фон элемента span прозрачным, используя класс bg-transparent . Нам также нужно добавить класс transition-colors , чтобы сделать переход плавным. Вперед и те классы:

 <кнопка>
  Следуй за мной

 

Теперь, когда мы добавили все эти классы, вы можете увидеть анимацию фонового градиента в действии в этой демонстрации:

См. Анимированную кнопку фонового градиента CSS с попутным ветром Pen
от Rishi Purwar (@rishi111)
на CodePen.

Анимация градиента границы ввода

Теперь мы посмотрим, как анимировать границу компонента ввода. Скопируйте и вставьте окончательный код из раздела градиента входной границы:

.
 <дел>