CSS-стиль transform используется для изменения размера, положения и формы элемента на веб-странице.

Он позволяет применять трансформации, такие как перемещение, вращение, масштабирование и искажение.

CSS-стиль transform-origin определяет точку, относительно которой будут применяться трансформации (например, вращение, масштабирование) для элемента.

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

CSS-правило @keyframes используется для создания анимаций.

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

В этом примере элемент с классом box будет анимироваться: он будет увеличиваться в размере и менять цвет от красного до желтого, а затем обратно к синему, выполняя этот цикл бесконечно в течение 2 секунд. Код 👆

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

Это позволяет более компактно и удобно настраивать анимации.

Свойство 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