Урок 7: CSS Анимации – Оживи Свои Веб-Страницы!

Lesson7

Урок 7: CSS Анимации – Оживи Свои Веб-Страницы!

Обзор

Привет снова, креативный гений! 🎨 Если CSS-переходы — это элегантные па танцора вальса, то CSS-анимации — это уже настоящие баттлы на танцполе с диско-шаром и дымом из подвала. В этом уроке мы выводим всё на новый уровень и учимся создавать анимации, которые превратят твои статичные элементы в подвижные и захватывающие шедевры.

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

Шаг 1: Что Такое CSS Анимации?

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

Вот небольшой пример:

@keyframes bounce {
    0% {
        transform: translateY(0);
    }
    50% {
        transform: translateY(-20px); /* Прыжок вверх! */
    }
    100% {
        transform: translateY(0); /* И обратно вниз */
    }
}

.ball {
    animation: bounce 1s ease-in-out infinite; /* Прыгай бесконечно! */
}

Этот пример заставит твой элемент .ball прыгать вверх-вниз, как мячик на батуте. (Нет, кофе мы ему не давали.)

Шаг 2: Подготовка Проекта – Наводим Порядок!

Создадим новую папку для нашего проекта и сделаем всё аккуратно, чтобы было куда наводить все эти танцевальные движения:

cd ~/Documents/
mkdir moy-css-animatsii-proekt
cd moy-css-animatsii-proekt
touch index.html styles.css

Теперь открой index.html в своём любимом редакторе и добавь следующее:

HTML

<!DOCTYPE html>
<html lang="ru">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CSS Анимации – Танцы до Утра!</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <header>
        <h1>Добро пожаловать на вечеринку CSS-анимаций!</h1>
        <p>Смотри, как элементы на этой странице начинают двигаться и танцевать с шиком:</p>
    </header>
    <main>
        <div class="ball"></div>
        <div class="square"></div>
    </main>
    <footer>
        <p>&copy; 2024 Анимации от Души</p>
    </footer>
</body>
</html>

CSS

Теперь открой styles.css и добавь эти стили, чтобы оживить свою страницу:

body {
    font-family: Arial, sans-serif;
    background-color: #f0f0f0;
    text-align: center;
    padding-top: 50px;
}

header, footer {
    background-color: #3498db;
    color: white;
    padding: 20px;
}

main {
    margin: 20px;
    padding: 20px;
}

/* Стиль для анимированных элементов */
.ball {
    width: 50px;
    height: 50px;
    background-color: #e74c3c;
    border-radius: 50%;
    display: inline-block;
    margin: 20px;
    animation: bounce 1s ease-in-out infinite;
}

.square {
    width: 50px;
    height: 50px;
    background-color: #2ecc71;
    display: inline-block;
    margin: 20px;
    animation: spin 2s linear infinite;
}

/* Ключевые кадры для прыжка */
@keyframes bounce {
    0% {
        transform: translateY(0);
    }
    50% {
        transform: translateY(-20px);
    }
    100% {
        transform: translateY(0);
    }
}

/* Ключевые кадры для вращения */
@keyframes spin {
    0% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(360deg);
    }
}

С этими стилями твоя «шарик» будет прыгать, а «квадрат» вертеться, как будто они готовятся к новому танцевальному конкурсу!

Шаг 3: Запустим Локально с Caddy – Пусть Все Увидят Твою Магию!

Используй Caddy, чтобы увидеть свой проект в действии:

  1. Открой терминал и перейди в папку проекта:

    cd ~/Documents/moy-css-animatsii-proekt

  2. Запусти локальный сервер с помощью Caddy:

    caddy file-server --listen :8080

  3. Открой браузер и введи:

    http://localhost:8080

И вуаля! Теперь посмотри, как твои элементы танцуют и вертятся, как настоящие звезды вечера.

Важный Совет: CSS Не Обновляется?

Если ты внёс изменения в CSS, но их не видно, браузер может использовать старую версию из кеша. Чтобы это исправить, сделай жёсткое обновление:

  • Windows/Linux: CTRL + F5 или CTRL + SHIFT + R
  • Mac: CMD + SHIFT + R

Теперь анимации должны появиться во всей своей красе!

Вызов – Создай Пульсирующий Круг!

Для дополнительного задания создай элемент <div> в виде круга и используй анимации, чтобы он плавно увеличивался и уменьшался, как сердце, что бьётся под ритм музыки. Вот как начать:

<div class="pulsiruyushchiy-krug"></div>

CSS

.pulsiruyushchiy-krug {
    width: 100px;
    height: 100px;
    background-color: #9b59b6;
    border-radius: 50%;
    margin: 50px auto;
    animation: pulse 2s ease-in-out infinite;
}

@keyframes pulse {
    0% {
        transform: scale(1);
    }
    50% {
        transform: scale(1.2); /* Увеличение */
    }
    100% {
        transform: scale(1); /* Возврат к норме */
    }
}

Попробуй, и посмотри, как твой круг пульсирует в такт твоей фантазии!

Итог

Отличная работа, маг анимаций! 🧙‍♂️ Теперь ты знаешь, как использовать CSS, чтобы оживить свои элементы и заставить их двигаться так, будто они собираются участвовать в танцевальном шоу. Что бы ты ни создавал — от лёгких эффектов до безумных танцев — теперь ты можешь оживить любую веб-страницу.

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

CSS  Анимации  Веб-дизайн  Начинающие  Caddy Server 

Смотрите также