Create nice animation when scanning nfc cards

This commit is contained in:
klmp200 committed 2024-11-15 14:47:15 +01:00
1 parent 63736a6c60
commit f0e5161e54
4 files changed
+43 -4

No files matched your search

@@ -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);
}
}