1 | initial version |
Here is a basic example of how you can create an animation of a fingerprint scanner using CSS:
<div class="fingerprint-scanner">
<div class="scanner"></div>
<div class="fingerprint"></div>
</div>
.fingerprint-scanner {
position: relative;
width: 150px;
height: 150px;
}
.scanner {
position: absolute;
top: 25px;
left: 25px;
width: 100px;
height: 100px;
background-color: #CCC;
border-radius: 50%;
animation: scanner 2s ease infinite;
}
.fingerprint {
position: absolute;
top: 60px;
left: 60px;
width: 30px;
height: 30px;
background-color: #FFF;
border-radius: 50%;
}
Note that the scanner element is given an animation property with the value "scanner 2s ease infinite", which is a reference to an animation keyframes rule that we'll define in the next step.
@keyframes scanner {
0% {
transform: scale(1);
}
50% {
transform: scale(1.2);
}
100% {
transform: scale(1);
}
}
This keyframes rule defines a simple animation that scales the scanner element up by 20% and then back to its original size over a 2-second duration, with easing to make the animation appear smoother.