Свойство animation-duration в CSS используется для указания времени, в течение которого выполняется анимация.

Оно определяет, как долго будет длиться одна итерация анимации, которую вы задали с помощью @keyframes.

Свойство animation-name в CSS используется для указания имени анимации, которая была определена с помощью правила @keyframes.

Оно является частью более широкого набора свойств анимации, позволяя вам управлять тем, какая анимация будет применена к элементу.

Свойство animation-timing-function в CSS используется для определения темпа изменения анимации.

Оно позволяет вам задавать, как будет изменяться скорость анимации в течение её выполнения.

Свойство animation-delay в CSS используется для задания времени, по истечении которого анимация начнет выполняться после того, как элемент будет отображен.

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

Свойство animation-fill-mode в CSS определяет, как анимация должна применяться к элементу до её первого ключевого кадра (перед началом анимации) и после завершения анимации.

Это свойство позволяет контролировать вид элемента до, во время и после анимации, что может быть полезно для создания более сложных визуальных эффектов.

Свойство animation-play-state в CSS используется для управления состоянием анимации.

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

Made in HTML/CSS

Проект: Стильные часы.

Часть 1: - HTML создает структуру для отображения времени и даты в центре экрана.

Для того чтобы в будущем брать данные по дате и времени с js, нам надо добавить {{ }}

Made in HTML/CSS

Проект: Стильные часы. ФИНАЛ

Часть 3: - JavaScript использует Vue.js для динамического обновления времени и даты каждую секунду, а также добавляет необходимые нули к числовым значениям для правильного отображения.

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

Made in HTML/CSS

2 проект: Слайдер.

1 часть: html:
Разберем подробнее:

1. <div class="container">: Обертывающий блок для всего слайдера.
2. <div class="slider">: Блок, который содержит сами карточки.
3. <div class="card">: Каждая карточка содержит изображение и заголовок.
4. <img src="ссылка на изображение" alt="" />: Здесь будет изображение
5. <h1>Made in HTML/CSS</h1>: Заголовок внутри карточки.

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

Made in HTML/CSS

Проект 3: Текст с анимацией без JavaScript

Первая часть: HTML

Рассмотрим подробнее процесс работы с анимационным текстом в HTML.

Это довольно простая задача: достаточно объявить нужный тег, например <p> (или любой другой заголовочный тег, такой как h1, h2 и так далее).

Затем мы можем добавить к этому тегу класс и заполнить его содержимым. В данном примере внутри тега будет находиться название нашего канала.

Made in HTML/CSS

Проект 3: Текст с анимацией без JavaScript

Вторая часть: css

Рассмотрим подробнее:

Данный CSS-код применяет стиль к элементам с классом .text, создавая анимированный текст с эффектом вращающегося фона. Основные характеристики:

- Жирный шрифт, размер 5vw, цвет текста с обводкой.
- Использование background-clip: text для отображения фона только в области текста.
- Псевдоэлементы :before и :after создают яркий фон с радиусами закругления и смешанным режимом.
- Анимация вращения (360 градусов) придаёт динамичность.

В результате получается стильный текст с эффектом вращающегося фона.

Made in HTML/CSS

Проект 4: Поисковая панель

Первая часть: html

Рассмотрим подробнее:

1. Контейнер (<div class="wrap">): Оборачивает весь элемент для стилизации.

2. Поисковая панель (<div class="search">): Содержит поле ввода и кнопку.
- Поле ввода (<input class="searchTerm">): Позволяет пользователю ввести запрос с текстом-подсказкой.
- Кнопка (<button class="searchButton">): Отправляет запрос, содержит иконку лупы из Font Awesome.

Made in HTML/CSS

Проект 4: Поисковая панель

Вторая часть: css

Рассмотрим подробнее:

1. Импорт шрифта: Подключает шрифт Open Sans из Google Fonts.
2. Общее оформление: Устанавливает светло-серый фон для страницы и применяет шрифт к тексту.
3. Поисковая панель:
- .search: Задает размеры и флекс-выравнивание.
- .searchTerm: Стили для поля ввода (рамка, padding, цвет текста при фокусе).
- .searchButton: Стили для кнопки (размер, цвет фона, закругленные углы).
4. Центрирование: .wrap ограничивает ширину и размещает элемент по центру экрана.


Made in HTML/CSS