Поиск по сайту:

Все, что перестает удаваться, перестает и привлекать (Ф. Ларошфуко).

Создание загрузчика анимации сканирования с использованием HTML и CSS

1 мин для чтения
FavoriteLoadingДобавить в избранное
1 Звезда2 Звезды3 Звезды4 Звезды5 Звезд (1 оценок, среднее: 5,00 из 5)
Загрузка...
29 апреля 2021
В этой статье мы узнаем, как создать анимацию сканирования. Это можно использовать для добавления интерактивности странице загрузчика. Для этого используются
простые HTML и CSS.

 

Подход:

  • Сначала мы создадим HTML-файл, в который мы собираемся добавить div для добавления в него диапазона.
  • Затем мы создадим стиль CSS, чтобы придать анимационные эффекты анимации сканирования.

 

Мы начнем с определения разделов HTML и CSS на странице, как показано ниже.
Раздел HTML: в этом разделе определяется структура страницы.

 

  • Сначала мы создадим HTML-файл.
  • Затем мы напишем шаблонный код, необходимый для HTML-страницы.
  • Затем мы свяжем файл CSS или напрямую добавим необходимый CSS, который обеспечивает все эффекты анимации.
  • В разделе body мы добавим диапазон, чтобы добавить наш текст.
  • index.html
<!DOCTYPE html>
<html lang="ru">
<head>
<link rel="stylesheet" href="style.css" />
</head>

<body>
<div class="scan">
<img
src=
"https://andreyex.ru/wp-content/uploads/2021/04/Sozdanie-zagruzchika-animatsii-skanirovaniya-s-ispolzovaniem-HTML-i-CSS.png"
alt="barcode"
/>
</div>
</body>
</html>

 

Раздел CSS: В этом разделе мы определим CSS страницы. Используя CSS, мы добавим различные типы анимации и эффектов к нашей HTML-странице, чтобы она выглядела интерактивной для всех пользователей.

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

 

.scan {
    width: 10em;
    text-align: center;
    padding: 6px 2px;
    position: absolute;
    left: 0;
    right: 0;
    top: 50%;
    margin: auto;
    border: dashed .25em rgb(90, 85, 85);
    transform: translate(-50%);
}


.scan::after {
    content: '';
    background: rgb(23, 162, 74);
    width: 0.25em;
    height: 3.5em;
    display: block;
    position: absolute;
    top: 0;
    right: 0;
    left: 0;
    bottom: 0;
    margin: auto;
    opacity: 7;
    z-index: 2;
    animation: 2s infinite ease-in-out roll;
}


.scan img {
    height: 30px;
    width: 98%;
}


@keyframes roll {
    0% {
        transform: translateX(-50px);
    }
    50% {
        transform: translateX(50px);
    }
    100% {
        transform: translateX(-50px);
    }
}

 

Вывод:

Если вы нашли ошибку, пожалуйста, выделите фрагмент текста и нажмите Ctrl+Enter.

Читать  Как реализовать отзывчивые стили css только на мобильных устройствах
Поделиться в соц. сетях:
5 1 голос
Рейтинг статьи
Подписаться
Уведомить о
guest
0 комментариев
Межтекстовые Отзывы
Посмотреть все комментарии

Читайте также

0
Оставьте комментарий! Напишите, что думаете по поводу статьи.x
()
x

Сообщить об опечатке

Текст, который будет отправлен нашим редакторам:

Заполните форму и наш менеджер перезвонит Вам в самое ближайшее время!

badge
Обратный звонок 1
Отправить
galka

Спасибо! Ваша заявка принята

close
galka

Спасибо! Ваша заявка принята

close