Create nice animation when scanning nfc cards

This commit is contained in:
2024-11-14 11:26:49 +01:00
parent 63736a6c60
commit f0e5161e54
4 changed files with 43 additions and 4 deletions

View File

@ -0,0 +1,34 @@
nfc-input[scan="active"]::before {
content: "";
position: relative;
top: 0;
bottom: 0;
left: 0;
background: #18c89b;
box-shadow: 0 0 70px 20px #18c89b;
clip-path: inset(0);
animation:
x 1s ease-in-out infinite alternate,
y 2s ease-in-out infinite;
}
@keyframes x {
to {
transform: translateX(-100%);
left: 100%;
}
}
@keyframes y {
33% {
clip-path: inset(0 0 0 -100px);
}
50% {
clip-path: inset(0 0 0 0);
}
83% {
clip-path: inset(0 -100px 0 0);
}
}