Анимация сканера отпечатков пальцев в CSS
Я создал анимацию сканера отпечатков пальцев в CSS, но столкнулся с проблемой, когда анимация сканера не остается на месте, а следует за анимацией сканирующей доски. Для получения более подробной информации я прикрепил ссылку на мои коды и ящик ниже.
Я был бы очень признателен за вашу помощь, спасибо.
Ответы 2
Верхнее изображение перемещается вместе со сканированием, поскольку оно создано с использованием анимации CSS, которая меняет высоту изображения от 0 % до 100 % и обратно до 0 % в течение 4 секунд. Эта анимация применяется к псевдоэлементу ::before элемента .scan .retina с использованием правила анимации ключевого кадра.
Псевдоэлемент ::before позиционируется абсолютно по отношению к элементу .scan .retina, а его высота анимируется, чтобы заполнить всю высоту элемента .scan .retina.
Поскольку псевдоэлемент ::before расположен над фоновым изображением элемента .scan .retina, кажется, что внешний вид фонового изображения движется вместе с анимацией.
background-position: center использует высоту элемента для расчета центрального положения фонового изображения. Вы анимируете высоту элемента, поэтому центральное положение постоянно меняется. Вам нужно будет установить фиксированное местоположение для background-position.
Установка фонового изображения на 75 пикселей сверху кажется правильной позицией.
.scan .retina::before {
/* other css */
background-position: 0 75px;
}
Я пробовал ваше решение, и оно работает хорошо. Спасибо.