Урок 2: CSS дизайн и анимации тамагочи

🎯 Цель урока

В этом уроке мы превратим нашу HTML-заготовку в красивый интерактивный интерфейс! Создадим яркие градиенты, анимированные полоски здоровья, красивые кнопки и живые эффекты.

Ты узнаешь, как использовать современный CSS для создания привлекательного пользовательского интерфейса с анимациями и интерактивными элементами.

Предварительный просмотр стилизованного тамагочи

🐣

Малыш (уровень 2)

🍎 Голод

75%

😊 Счастье

90%

💤 Энергия

60%

🛁 Чистота

85%

Вот каким станет наш тамагочи после стилизации!

🌈 Основные стили контейнера

Начнём с создания базовых стилей. Установим красивый фон, центрирование и основную цветовую схему для нашего тамагочи.

🎨 Базовая стилизация

body {
  font-family: 'Segoe UI', Arial, sans-serif;
  background: linear-gradient(135deg, #74b9ff 0%, #0984e3 100%);
  margin: 0;
  padding: 20px;
  min-height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
}

.pet-container {
  background: rgba(255, 255, 255, 0.95);
  border-radius: 25px;
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.2);
  padding: 30px;
  max-width: 400px;
  width: 100%;
  backdrop-filter: blur(10px);
}

linear-gradient создаёт красивый градиентный фон, а backdrop-filter добавляет эффект размытия для современного вида.

🔥 Градиенты и цветовая палитра

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

Голод

Красный градиент

Счастье

Жёлто-розовый

Энергия

Синий градиент

Чистота

Зелёно-голубой

🌈 CSS градиенты для статистик

.hunger-bar {
  background: linear-gradient(135deg, #ff6b6b, #ee5a52);
}

.happiness-bar {
  background: linear-gradient(135deg, #feca57, #ff9ff3);
}

.energy-bar {
  background: linear-gradient(135deg, #48cae4, #0077b6);
}

.cleanliness-bar {
  background: linear-gradient(135deg, #a8e6cf, #56ccf2);
}

🐾 Стилизация области питомца

Создадим красивую область для отображения нашего виртуального друга с градиентным фоном и эффектами свечения.

🐾 Дизайн питомца

.pet-display {
  background: linear-gradient(135deg, #74b9ff, #0984e3);
  color: white;
  text-align: center;
  padding: 30px;
  border-radius: 15px;
  margin-bottom: 20px;
  position: relative;
  overflow: hidden;
  box-shadow: 0 10px 25px rgba(116, 185, 255, 0.3);
}

.pet-avatar .emoji {
  font-size: 4rem;
  display: block;
  margin-bottom: 10px;
  animation: bounce 2s ease-in-out infinite;
}

@keyframes bounce {
  0%, 20%, 50%, 80%, 100% { transform: translateY(0); }
  40% { transform: translateY(-10px); }
  60% { transform: translateY(-5px); }
}

Демонстрация анимации:

🐣

💖 Счастливый питомец!

💕

💖

❤️

Анимации делают игру живой и эмоциональной!

📊 Полоски прогресса с анимацией

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

📊 Стили статистик

.pet-stats {
  margin-bottom: 25px;
}

.stats-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 15px;
}

.stat-item {
  background: #f8f9fa;
  padding: 15px;
  border-radius: 12px;
  border: 2px solid #e9ecef;
  transition: all 0.3s ease;
}

.stat-item:hover {
  transform: translateY(-2px);
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
}

.stat-bar {
  background: #e9ecef;
  height: 10px;
  border-radius: 5px;
  overflow: hidden;
  margin: 8px 0;
  position: relative;
}

.stat-fill {
  height: 100%;
  border-radius: 5px;
  transition: width 0.5s ease;
  position: relative;
  overflow: hidden;
}

.stat-fill::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.7), transparent);
  animation: shine 2s ease-in-out infinite;
}

@keyframes shine {
  0% { left: -100%; }
  100% { left: 100%; }
}

Эффект shine создаёт красивый блик, который проходит по полоске прогресса, делая её более живой.

🎮 Интерактивные кнопки

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

🎮 Стили кнопок

.actions-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

.action-btn {
  background: linear-gradient(135deg, #667eea, #764ba2);
  color: white;
  border: none;
  padding: 15px 20px;
  border-radius: 12px;
  font-size: 1rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s ease;
  box-shadow: 0 4px 15px rgba(102, 126, 234, 0.3);
  position: relative;
  overflow: hidden;
}

.action-btn:hover {
  transform: translateY(-2px) scale(1.02);
  box-shadow: 0 8px 25px rgba(102, 126, 234, 0.4);
}

.action-btn:active {
  transform: translateY(0) scale(0.98);
}

.action-btn::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 0;
  height: 0;
  background: rgba(255, 255, 255, 0.5);
  border-radius: 50%;
  transform: translate(-50%, -50%);
  transition: all 0.5s ease;
}

.action-btn:active::before {
  width: 300px;
  height: 300px;
}

Эффект ripple (расширяющийся круг) при нажатии создаёт ощущение отзывчивости и современности интерфейса.

✨ Специальные эффекты и состояния

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

✨ Эффекты состояний

.pet-hungry {
  animation: shake 0.5s ease-in-out infinite;
}

.pet-happy {
  animation: bounce 1s ease-in-out infinite;
}

.pet-sleeping {
  opacity: 0.7;
  filter: blur(1px);
}

@keyframes shake {
  0%, 100% { transform: translateX(0); }
  25% { transform: translateX(-5px); }
  75% { transform: translateX(5px); }
}

.low-stat {
  background: linear-gradient(135deg, #ff6b6b, #ee5a52) !important;
  animation: pulse 1s ease-in-out infinite;
}

@keyframes pulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.05); }
}

Критически низко

Нормально

Отлично

📱 Адаптивный дизайн

Сделаем наш тамагочи отлично выглядящим на всех устройствах - от мобильных телефонов до планшетов.

📱 Медиа-запросы

@media (max-width: 768px) {
  .pet-container {
    margin: 10px;
    padding: 20px;
  }
  
  .stats-grid {
    grid-template-columns: 1fr;
    gap: 10px;
  }
  
  .actions-grid {
    grid-template-columns: 1fr;
  }
  
  .pet-avatar .emoji {
    font-size: 3rem;
  }
}

🎨 Твоё задание

Создай файл styles.css и добавь в HTML следующие стили:

Красивый градиентный фон для всей страницы
Стилизацию главного контейнера с закруглёнными углами
Красивую область питомца с градиентом и анимацией
Полоски прогресса с разными цветами для каждой статистики
Интерактивные кнопки с эффектами наведения
Анимации bounce, shine и pulse
Адаптивные стили для мобильных устройств

💡 Не забудь связать CSS файл с HTML через тег <link>!

💡 Секреты красивого CSS

Градиенты: Используй linear-gradient с углом 135deg для красивых диагональных переходов. Попробуй сочетания из 2-3 близких цветов.

Анимации: Делай анимации плавными (ease-in-out) и не слишком быстрыми. 0.3s для hover эффектов, 1-2s для декоративных анимаций.

Тени: box-shadow создаёт глубину. Используй полупрозрачные тени с небольшим размытием для естественного вида.

Переходы: transition: all 0.3s ease делает любое изменение стилей плавным и приятным для глаз.

⚙️ Следующий урок: JavaScript логика →

🎨 Урок 2: CSS дизайн и анимации