Эффект блика в предзагрузке на CSS
Эффект блика в предзагрузке на CSS
Если вы пользуетесь мобильными банковскими приложениями, приложениями маркетов и всяким подобным, наверняка видели такой эффект, когда данные еще не загрузились, а на экране уже отобразилась схематическая раскладка страницы с плейсхолдерами ее элементов. И для визуальной имитации, что приложение еще не окончательно зависло, по плейсхолдерам периодически пробегают анимированные блики. Я решил реализовать нечто подобное для web-страничек. За основу взят код из предыдущей статьи.
Начинаем с таблицы стилей и небольшой теории. Создается контейнер нужного размера, который будет являться плейсхолдером. Внутри него создается блок с градиентным фоном, на который накладывается анимация. Принцип анимации блика заключается в следующем: вложенный блок сперва находится за левой границей контейнера, а затем перемещается за правую границу контейнера. Цвет и ширина блика, а также скорость его перемещения регулируется в CSS.
Code: Убрать нумерацию
- <style type="text/css">
- .blink {
- margin: 5px;
- background: #DDD;
- border-radius: 10px;
- position: relative;
- overflow: hidden;
- }
- .blink>div {
- height: 100%;
- width: 120px;
- position: absolute;
- top: 0;
- /* цвета градиента */
- background: linear-gradient(
- 90deg,
- rgba(255, 255, 255, 0.01),
- rgba(255, 255, 255, 0.3),
- rgba(255, 255, 255, 0.01)
- );
- /* скорость анимации */
- animation: blink 2s infinite linear;
- /* угол наклона блика */
- transform: skewX(-5deg);
- }
- @keyframes blink {
- 0% { left: -150%; }
- 50% { left: 0%; }
- 100% { left: 150%; }
- }
- </style>
Code (HTML) : Убрать нумерацию
- <div class="tblrow">
- <div class="blink" style="width:50%; height:40px;"><div></div></div>
- <div class="blink" style="width:50%; height:40px;"><div></div></div>
- </div>
- <div class="tblrow">
- <div class="blink" style="width:100%; height:10px;"><div></div></div>
- </div>
- <div class="tblrow">
- <div class="blink" style="width:25%; height:10px;"><div></div></div>
- <div class="blink" style="width:45%; height:10px;"><div></div></div>
- <div class="blink" style="width:15%; height:10px;"><div></div></div>
- <div class="blink" style="width:25%; height:10px;"><div></div></div>
- </div>
Просмотров: 248 | Комментариев: 0
Комментарии
Отзывы посетителей сайта о статье
Комментариeв нет
Добавить комментарий
Заполните форму для добавления комментария