Create nice animation when scanning nfc cards

This commit is contained in:
klmp200 authored and Bartuccio Antoine committed 2024-11-15 14:51:45 +01:00
1 parent fce6c3d29c
commit 9991f5dc64
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);
}
}