mirror of
https://github.com/ae-utbm/sith.git
synced 2025-07-11 12:29:24 +00:00
Create nice animation when scanning nfc cards
This commit is contained in:
34
core/static/core/components/nfc-input.scss
Normal file
34
core/static/core/components/nfc-input.scss
Normal 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);
|
||||
}
|
||||
}
|
Reference in New Issue
Block a user