CSS реализует Skeleton Screen (скелетный экран)

CSS

предисловие

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

идеи

  • HTML для построения скелета
  • CSS плюс стиль
  • CSS плюс анимация

Начните с построения скелета

Каркасная структура очень проста, просто поместите несколько понравившихся вам блочных элементов, и все в порядке.

<div class='screen-root'>
  <ul>
    <li/>
    <li/>
    <li/>
  </ul>
</div>

CSS-окрашивание

Скелетный экран, который мы часто видим, выглядит так

Для облегчения описания и усиления контраста я сначала сделаю версию-призрак.

Сначала используйте csslinear-gradientСвойство рисует градиентное изображение красного цвета с небольшим количеством зеленого и заполняет его в качестве фона.liЭтикетка

Linear-gradient() может создать многоцветное изображение с линейным градиентом.Дополнительную информацию см.здесь

li{
    background-image: linear-gradient(90deg, #ff0000 25%, #41de6a 37%, #ff0000 63%);
    width: 100%;
    height: 0.6rem;
    list-style: none;
}

При фактическом использовании измените карту градиента на обычный цвет, например:background-image: linear-gradient(90deg, #f2f2f2 25%, #e6e6e6 37%, #f2f2f2 63%)

заставить его двигаться

Все, что осталось сделать, это заставить зеленый цвет двигаться посередине.

Вы можете придумать какой-нибудь способ заставить его двигаться?

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

li{
    background-image: linear-gradient(90deg, #ff0000 25%, #41de6a 37%, #ff0000 63%);
    width: 100%;
    height: 0.6rem;
    list-style: none;
    background-size: 400% 100%;
    background-position: 100% 50%;
    animation: skeleton-loading 1.4s ease infinite;
}

@keyframes skeleton-loading {
  0% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0 50%;
  }
}

здесь, чтобы датьbackground-positionСвойство задает два значения, первое значение представляет смещение горизонтального положения относительно контейнера, а второе значение представляет смещение вертикального положения относительно контейнера.

Использовать процентные настройкиbackground-positionзначения, он выполняет формулу, которая вычисляет фактическое значение таргетинга(container width - image width) * (position x%) = (x offset value), то есть разница в ширине между контейнером и изображением умножается на заданное значение позиционирования в процентах, и результатом является фактическое значение смещения.background-sizeОдна из целей установки ширины файла .

Некоторые студенты могут спросить, будетbackground-sizeЗначение устанавливается на 50%, а контейнер может генерировать ширину разницы. Да, но таким образом, фоновое изображение будет плитовать весь контейнер, вы будете удивлены зеленой точкой в ​​двойной.

Можно попробовать установить разные значения background-size, посмотреть, как он себя ведет, и подумать, почему так происходит.

Наконец, используя анимацию по ключевым кадрам, установитеbackground-positionЗначение по координате x идет от100%прибыть0%

@keyframes skeleton-loading {
  0% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0 50%;
  }
}

Предположим, что ширина контейнера100px, то ширина фонового изображения равна400pxИспользуя вышеуказанную формулу, в анимации первого кадра, истинное значение смещения фонового изображения относительно контейнера

(100px-400px)*100% = -300px

Фактическое смещение последнего кадра

(100px-400px)*0% = 0

Процесс анимации на самом деле представляет собой линейное фоновое изображение с шириной, в 3 раза превышающей смещение контейнера от контейнера.-300pxприбыть0процесс изменения.

последний шаг

Последний шаг - не забудьте изменить цвет фона на обычный...

Вышеприведенный код (GitHub.com/Yes Can Prosperity/SK…)

Категории