CSS для достижения эффекта логотипа официального сайта Ant Design с эффектом яйца

внешний интерфейс CSS
CSS для достижения эффекта логотипа официального сайта Ant Design с эффектом яйца

в последних проектахAnt DesignДоступ больше, это еще очень хорошо. Не знаю, встречали ли вы такой эффект.На официальном сайте, если навести мышку на Логотип, букваiЗначок на изменениях не остановится, после того, как выйдет из остановки, снова поменяйте, можно считать небольшое яйцо (вероятно, я не видел до 🤣), продемонстрировать следующее:

Kapture 2022-01-24 at 23.37.48

Но неудивительно, что я его не нашел, потому что этот эффект реализует js, и он должен дождаться завершения загрузки, прежде чем он сможет подействовать, а официальный сайт иногда очень тормозит.hoverэффект

image-20220124234154039

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

Во-первых, принцип реализации CSS

Весь принцип реализации примерно такой

  1. Подготовьте материал, содержащий все маленькие значки
  2. Создайте покадровую анимацию CSS, которая меняет положение фона.
  3. Управление анимацией при наведении мыши

2. Подготовка материала

Во избежание многократных запросов и для облегчения создания анимаций все материалы малых иконок объединены вместе (сохранены с официального сайта), как и предыдущая «Карта спрайтов», следующим образом

image-20220124234305933

Предположим, что структура HTML такая

<h1 class="logo">Ant Design</h1>

Для лучшей семантики рекомендуется оставить текст здесь, а затем скрыть текст другими средствами (например, прозрачностью), логотип можно использовать в качестве фонового изображения, а затем небольшую изменяемую иконку можно сгенерировать с помощью псевдоэлементов ( все декоративные элементы могут быть псевдоэлементами).Элемент для генерации, чтобы обеспечить чистоту HTML), CSS выглядит следующим образом

.logo{
  width: 500px;
  height: 100px;
  position: relative;
  color: transparent;
  background: url('https://imgservices-1252317822.image.myqcloud.com/image/012420220165011/c0e82c29.svg') center/contain no-repeat;
  cursor: pointer;
}
.logo::after{
  content: '';
  position: absolute;
  width: 32px;
  height: 32px;
  background: url('https://imgservices-1252317822.image.myqcloud.com/image/012420220165415/b0005044.svg') 0 / cover no-repeat;
  right: 113px;
  top: -18px;
}

статическая компоновка

image-20220124234420692

Во-вторых, покадровая CSS-анимация.

Тогда есть анимация, просто используйте функцию анимации CSS вsteps()функциональный символ, вы можете добиться покадровой анимации

Сначала определите ключевой кадр и измените положение фона.

@keyframes random {
  to {
    background-position: 100%;
  }
}

Здесь маленькие значки имеют в общей сложности11Чжан, изменение между собой10шаг, поэтому анимация устанавливается следующим образом

.logo::after{
	/*其他样式*/
  animation: random 1s steps(10) infinite;
}

Это приводит к бесконечному циклу покадровой анимации.

Kapture 2022-01-24 at 20.07.24

3. Приостановите и запустите анимацию CSS

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

Некоторые учащиеся могут так делать, по умолчанию анимации нет, а анимация создается при наведении, вот так

.logo::after{
	/*默认无动画*/
}
.logo:hover::after{
  animation: random 1s steps(10) infinite;
}

Но есть две проблемы с этим:

  1. Больше затрат на производительность в расчете на анимацию, созданную в режиме реального времени.
  2. Положение восстанавливается до исходного состояния каждый раз, когда мышь остается.

Kapture 2022-01-24 at 20.35.54

Поэтому такой подход не рекомендуется

В дополнение к вышеперечисленным методам управления запуском анимации вы также можете передатьanimation-play-stateАктивно установите паузу следующим образом

.logo::after{
	/*其他样式*/
  animation: random 1s steps(10) infinite;
  animation-play-state: paused; /*动画暂停*/
}

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

.logo:hover::after{
  animation-play-state: running; /*动画运行*/
}

Эффект следующий

Kapture 2022-01-25 at 10.33.11

В-четвертых, укажите начальную позицию

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

image-20220124234803464

Как справиться с этой ситуацией

Во-первых, мы думали, что можем вручную изменить положение фона, ❤ находится на 8-м месте, поэтому

.logo::after{
  /*其他样式*/
  background-position: -224px; /* 32 * 7 */
}

Эффект следующий

Kapture 2022-01-24 at 20.43.52

В этом пути больше проблем, так как начальная позиция анимации изменена, анимация перемещается с 8-го места в крайнее правое, а левое не проходит, и шаг нужно перенастраивать.

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

Например, если вы хотите указать положение 7-го кадра в будущем, вы можете задержать 7/10 отрицательной общей длительности движения, и реализация выглядит следующим образом.

.logo::after{
  /*其他样式*/
  animation-delay: -.7s; /* 7 / 10 * 1s*/
}

Это не повлияет на оригинальную анимацию, идеальная реализация

Kapture 2022-01-24 at 20.57.22

Полный код доступен по адресу:Ant Design Logo (codepen.io)

Прикрепите полный код (в последнее время codepen кажется нестабильным)

.logo{
  width: 500px;
  height: 100px;
  position: relative;
  color: transparent;
  background: url('https://imgservices-1252317822.image.myqcloud.com/image/012420220165011/c0e82c29.svg') center/contain no-repeat;
  cursor: pointer;
}
.logo::after{
  content: '';
  position: absolute;
  width: 32px;
  height: 32px;
  background: url('https://imgservices-1252317822.image.myqcloud.com/image/012420220165415/b0005044.svg') 0 / cover no-repeat;
  right: 113px;
  top: -18px;
  animation: random 1s -.7s steps(10) infinite;
  animation-play-state: paused;
}
.logo:hover::after{
  animation-play-state: running;
}
@keyframes random {
  to {
    background-position: 100%;
  }
}

V. Резюме и объяснение

Выше приведена реализация CSS для эффекта логотипа официального веб-сайта Ant Design.Количество кода очень мало, и это также позволяет избежать проблемы, когда js не загружается, и опыт лучше.Ниже приводится краткое резюме

  1. Рендеринг CSS является своевременным, пока страница видна, это не повлияет на взаимодействие с CSS.
  2. Покадровую анимацию можно реализовать с помощью функции step() в анимации CSS.
  3. Анимации CSS могут запускаться автоматически или приостанавливаться вручную.
  4. Установив отрицательную задержку, вы можете заставить анимацию CSS запускаться раньше.

Конечно, преимуществ CSS больше, чем это Когда я открываю консоль Ant Design, меня немного ломает то, что она постоянно меняется.svgРеализована ссылка, если она всегда размещена на лого, то она будет постоянно запрашивать картинки, а маленькая иконка тоже будет "мигать".

image-20220124235204747

Количество запросов немного ошеломляет. Если небольшой партнер, отвечающий за официальный сайт Ant Design, увидит это, можно ли его оптимизировать?

Наконец, если вы считаете, что это хорошо и полезно для вас, пожалуйста, поставьте лайк, добавьте в закладки и перешлите ❤❤❤

Категории