Привет, меня зовут Стивен.
Когда многие веб-сайты загружают данные, чтобы страница не была слишком пустой, они будут использовать этот метод, чтобы объявить о загрузке контента, тем самым улучшив взаимодействие с пользователем:
Этот эффект называется по-китайскиСкелетонный экран, называется по-английскиSkeleton, в этом выпуске мы поделимся с вами тем, как добиться такого эффекта в CSS.
Видеоверсия этого урока находится по адресувоооооооооооооооооооооооооооооооооооооооооооооооооооооооооооооооооооооооооооооооооооооооооооооооооооооооооооооооооооооооооооооооооооооооооооооДобро пожаловать три подряд внимание!
часть HTML
Откройте редактор CodePen и добавьте некоторую структуру в раздел HTML, например карточку.
добавить один<div>Этикетка,classназванныйcard; на этой карточке будет картинка, добавьте<div>,classназванныйimage, и добавьте к нему изображение.
Затем идет заголовок и текст, добавьте новый<div>,classназванныйcontent. добавить новый<h4>Метка используется для отображения заголовка, а другая<div>,classназванныйdescription, который используется для отображения содержимого.
Разделы CSS
Перейдите в раздел CSS и сначала займитесь стилем карты. Присоединяйсяbodyселектор, установите светло-серый цвет фона и шрифтHelvetica, размер текста15px, а затем используйте Flexbox для центрирования содержимого вверх, вниз, влево и вправо.
Присоединяйся.cardселектор, заданная ширина320px, цвет фона установлен на белый, так что светло-серый фон может выделить этот белый цвет.
Добавьте немного закругленных углов, установите6px, так как в него будет добавлено изображение, для того, чтобы изображение имело закругленные углы, установитеoverflowдляhidden, а затем добавьте тень, очень легкую на ней.
Затем установите стиль контейнера изображения и добавьте.imageселектор, установите высоту на200px. Затем внутри изображения добавьте.image imgселектор, наборdisplayдляblock, ширина100%. Высота наследуется от родительского контейнера и устанавливается равнойinherit, чтобы сохранить пропорции изображения,object-fitустановить какcover.
Рядом с частью контента добавьте.contentселектор, наборpaddingвверх и вниз2rem,о1.8rem;Присоединяйсяh4селектор, задающий стиль заголовка,marginУстановить как сверху, так и слева0, следующее1rem; и размер текста, и межстрочный интервал установлены на1.5rem.
Наконец, текст, добавьте.descriptionселектор с размером текста, установленным на1rem, межстрочный интервал установлен на1.4rem, шаблон для этой карты готов.
Сделать каркасный экран
Вернитесь к части HTML, скопируйте еще одну карточку, но очистите изображения и текст внутри и добавьте файл с именемloadingизclass, мы применим к этой карте эффект каркасного экрана.
Перейдите в раздел CSS и поставьтеbodyвнутриjustify-contentустановить значение, изменить наspace-evenly, чтобы две карты могли равномерно распределить пустое пространство.
Затем, поскольку позже один и тот же серый цвет будет использоваться в нескольких местах, я определю этот серый цвет как переменную CSS и добавлю:rootселектор, набор--loading-greyсветло-серый.
У нас есть три места, где нам нужно добавить серые скелеты: изображение, заголовок и текст. Поэтому установите цвет фона всех трех селекторов на светло-серый.
Заголовку и тексту нужно задать некоторые стили по отдельности, добавить.loading h4селектор, который устанавливает стиль для позиции заголовка, будетmin-heightустановить как1.6rem, с закругленными углами, установленными на4px.
воссоединиться.loading .descriptionСелектор, задайте стиль положения текста, здесь высота задается чуть больше,min-heightустановить как4rem, закругленные углы также установлены на4px.
часть анимации
Теперь, когда статический каркасный экран в основном завершен, давайте займемся частью анимации.
Анимация экрана-скелета похожа на луч света, идущий слева направо, поэтому я установил для фона градиентный цвет. Присоединяйсяbackground, установить какlinear-gradient(), угол немного наклонен, задан как100deg; затем полностью прозрачным белым, позиция40%; градиент до полупрозрачного белого в50%; до полностью прозрачно-белого при60%.
Затем залейте основной цвет фона, светло-серый, и теперь вы можете видеть луч.
Итак, как мне его анимировать?Сначала я удвою ширину фона и установлю его на200%, выдерживание высоты100%. так что черезbackground-positionУправляйте смещением фона, чтобы добиться эффекта стремительного света.
теперь, когдаbackground-position-xустановить как100%, светлая часть будет слева, и установите0%Если это так, светлая часть будет справа, поэтому переход от большого числа к меньшему может привести к развертке слева направо.
Но этого недостаточно, нам нужно зарезервировать некоторые буферы слева и справа, чтобы свет можно было подметать снаружи, поэтому сначала измените его на120%.
затем определите@keyframesназванныйloading,Присоединяйсяtoблокировать, устанавливатьbackground-position-xдля-20%.
Добавьте настройки анимации, установите1секунд, название анимацииloading, ускорение равноease-in-out, количество повторений бесконечноinfinite.
Видно что появился эффект заметания.Мне кажется,заметает чуть быстрее,и интервал чуть больше.Можно прямо копировать оригиналbackground-position-xизменить на большее значение, например.180%, так что фон должен перемещаться на большее расстояние для достижения эффекта.
Наконец, небольшая доработка, луч косой, как лучи в трех положениях серого могут выглядеть одинаково?
Вам нужно только немного отсрочить время начала заголовка и содержание анимации, и установить заголовокanimation-delayдля.05s, а внутреннийanimation-delayдля.06s.
Давайте посмотрим на завершенный эффект этого случая
Вот введение в метод написания каркасных экранных эффектов с помощью CSS.В практических приложениях вам нужно только добавить в контейнер, когда данные загружены.loadingэтоclass; и после завершения загрузки данных данные отображаются в указанной позиции, аloadingэтоclassЕго можно удалить, и введение здесь вводиться не будет.
Выше приведено все содержание, которое будет представлено в этом выпуске.
Исходный код для этого случая находится накод спрей.IO/стивен класс/боюсь...
Ваша поддержка-моя мотивация, пожалуйста, обратите вниманиеМинимальный класс CodingStartup, давайте работать вместе!
- Станция Б:space.bilibili.com/451368848
- YouTube: YouTube.com/кодирование начало…
- Самородки:Талант /user/249773…