«Большой белый» в CSS — анимация CSS

CSS
«Большой белый» в CSS — анимация CSS

Примечание переводчика: содержание этой статьиBaymax in CSS - CSS AnimationПеревод

«Большой белый» в CSS

Давайте создадим персонажа Бэймакс из фильма «Большой герой 6» с помощью CSS.

В этом посте мы анимируем фоновое изображение вместе с тонким эффектом синхронизации анимации и делаем демонстрацию CSS с одним элементом HTML.

Ты сможешьпосмотреть в полноэкранном режиме здесь.

один элемент

Используя псевдоэлементы, мы сможем создать часть лица, используя один HTML-элемент.

<div class="baymax"></div>

стиль

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

body {
  background: radial-gradient(circle at center, #fff, #fff 50%, #aaa);
  background-size: 100% 100%;
  background-repeat: no-repeat;
  height: 100vh;
}

Далее мы будем располагаться лицом в центре страницы. Рот — простая черная линия, мы будем использовать созданную границу.

.baymax {
  border-bottom: 1.5em solid #000;
  position: absolute;
  top: 50%;
  left: 50%;
  width: 50%;
  transform: translate(-50%, -40%);
}

Первое свойство задает ширину1.5emчерная граница. Затем, используя линию абсолютного позиционирования, сдвиньте ее на 50% вниз и на 50% вниз слева. Эти 50% значений относятся к контейнеру (body) зависит от размера элемента.

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

Чтобы противодействовать этому, мы используем преобразование, чтобы стянуть элемент к 50% его ширины и увеличить его ширину на 40%.

На этом этапе рот центрируется вот так:

Плюс глаз

мы будем использоватьbeforeа такжеafterПсевдоэлементы добавляют глаза на лицо. Это не требует дополнительного HTML и полностью обрабатывается CSS.

.baymax::before {
  background: #000;
  border-radius: 50%;
  content: "";
  position: absolute;
  width: 12em;
  height: 12em;
  left: -9em;
  top: -6em;
  transform: skewX(-4deg);
}

.baymax::after {
  background: #000;
  border-radius: 50%;
  content: "";
  position: absolute;
  width: 12em;
  height: 12em;
  right: -9em;
  top: -6em;
  transform: skewX(4deg);
}

Каждый из этих псевдоэлементов имеет черный фон и радиус границы 50%, чтобы сделать их круглыми. Каждый расположен на одном конце рта, один на концеskewПреобразуйте так, чтобы они казались немного наклоненными назад. Результат должен выглядеть так:

низкая мощность

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

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

.baymax::before {
  background: linear-gradient(to bottom, #efefef, #efefef 50%, #000 50%, #000);
  background-position: 0 -100%;
  background-size: 200% 200%;
  ...
}

.baymax::after {
  background: linear-gradient(to bottom, #efefef, #efefef 50%, #000 50%, #000);
  background-position: 0 -100%;
  background-size: 200% 200%;
  ...
}

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

С двумя фоновыми градиентами мы можем добавить анимациюkeyframesконтролировать движение век.

@keyframes blink {
  0%, 50% {
    background-position: 0 100%;
  }
  85%, 95% {
    background-position: 0 75%;
  }
  100% {
    background-position: 0 100%;
  }
}

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

Таким образом, мы можем установить фон на полпути, затем между 50% и 85%, двигаться вниз, а затем быстро вернуться в конце анимации.

Следующим шагом будет указание псевдоэлементу использовать эти ключевые кадры анимации. Будуanimationатрибут существующего стиля.

.baymax::before {
  animation: blink 6s infinite;
  ...
}

.baymax::after {
  animation: blink 6s 0.1s infinite;
  ...
}

Здесь мы говорим браузеру использовать для каждого элементаblinkанимация. Продолжительность анимации установлена ​​на 6 секунд и будет повторяться бесконечно.

Во втором примере есть дополнительное свойство.6sПосле0.1секунд, чтобы указать браузеру отложить анимацию0.1Второй. Это создает эффект закрытия второго глаза чуть позже первого. Это добавляет эффект усталости, провисания и делает его более человечным. Окончательный результат должен выглядеть так:

Ты сможешьпосмотреть в полноэкранном режиме здесь.

браузер

В примерах кода я опускаю все часто используемые-webkitа также-mozприставка.transformа такжеanimationАтрибуты должны быть префиксными, я рекомендую использовать такие вещи, как AutoPRefixer.

Совместно используемая GIF-версия

Это анимированная GIF-версия, которой вы можете легко поделиться в Интернете.

(над)

автор этой статьиThinker

Если в этой статье есть какие-либо ошибки, пожалуйста, оставьте сообщение, и я исправлю его вовремя.

Если вы найдете это полезнымпоставить лайкилисобиратьБар!

Добро пожаловать на перепечатку или распространение, пожалуйста, указывайте источник при перепечатке

читать оригинал

Категории