Интересно реализованная анимация при клике на кнопку. Может идеально подойти для страницы входа или регистрации.
HTML
<div class="container" onclick="this.classList.toggle('active')">
<span class="text">LOGIN</span>
<svg class="fingerprint fingerprint-base" xmlns="https://www.w3.org/2000/svg" width="100" height="100"
viewBox="0 0 100 100">
<g class="fingerprint-out" fill="none" stroke-width="2" stroke-linecap="round">
<path class="odd"
d="m 25.117139,57.142857 c 0,0 -1.968558,-7.660465 -0.643619,-13.149003 1.324939,-5.488538 4.659682,-8.994751 4.659682,-8.994751" />
<path class="odd"
d="m 31.925369,31.477584 c 0,0 2.153609,-2.934998 9.074971,-5.105078 6.921362,-2.17008 11.799844,-0.618718 11.799844,-0.618718" />
<path class="odd"
d="m 57.131213,26.814448 c 0,0 5.127709,1.731228 9.899495,7.513009 4.771786,5.781781 4.772971,12.109204 4.772971,12.109204" />
<path class="odd" d="m 72.334009,50.76769 0.09597,2.298098 -0.09597,2.386485" />
<path class="even"
d="m 27.849282,62.75 c 0,0 1.286086,-1.279223 1.25,-4.25 -0.03609,-2.970777 -1.606117,-7.675266 -0.625,-12.75 0.981117,-5.074734 4.5,-9.5 4.5,-9.5" />
<path class="even"
d="m 36.224282,33.625 c 0,0 8.821171,-7.174484 19.3125,-2.8125 10.491329,4.361984 11.870558,14.952665 11.870558,14.952665" />
<path class="even"
d="m 68.349282,49.75 c 0,0 0.500124,3.82939 0.5625,5.8125 0.06238,1.98311 -0.1875,5.9375 -0.1875,5.9375" />
<path class="odd"
d="m 31.099282,65.625 c 0,0 1.764703,-4.224042 2,-7.375 0.235297,-3.150958 -1.943873,-9.276886 0.426777,-15.441942 2.370649,-6.165056 8.073223,-7.933058 8.073223,-7.933058" />
<path class="odd"
d="m 45.849282,33.625 c 0,0 12.805566,-1.968622 17,9.9375 4.194434,11.906122 1.125,24.0625 1.125,24.0625" />
<path class="even"
d="m 59.099282,70.25 c 0,0 0.870577,-2.956221 1.1875,-4.5625 0.316923,-1.606279 0.5625,-5.0625 0.5625,-5.0625" />
<path class="even"
d="m 60.901059,56.286612 c 0,0 0.903689,-9.415996 -3.801777,-14.849112 -3.03125,-3.5 -7.329245,-4.723939 -11.867187,-3.8125 -5.523438,1.109375 -7.570313,5.75 -7.570313,5.75" />
<path class="even"
d="m 34.072577,68.846248 c 0,0 2.274231,-4.165782 2.839205,-9.033748 0.443558,-3.821814 -0.49394,-5.649939 -0.714206,-8.05386 -0.220265,-2.403922 0.21421,-4.63364 0.21421,-4.63364" />
<path class="odd"
d="m 37.774165,70.831845 c 0,0 2.692139,-6.147592 3.223034,-11.251208 0.530895,-5.103616 -2.18372,-7.95562 -0.153491,-13.647655 2.030229,-5.692035 8.108442,-4.538898 8.108442,-4.538898" />
<path class="odd"
d="m 54.391174,71.715729 c 0,0 2.359472,-5.427681 2.519068,-16.175068 0.159595,-10.747388 -4.375223,-12.993087 -4.375223,-12.993087" />
<path class="even"
d="m 49.474282,73.625 c 0,0 3.730297,-8.451831 3.577665,-16.493718 -0.152632,-8.041887 -0.364805,-11.869326 -4.765165,-11.756282 -4.400364,0.113044 -3.875,4.875 -3.875,4.875" />
<path class="even"
d="m 41.132922,72.334447 c 0,0 2.49775,-5.267079 3.181981,-8.883029 0.68423,-3.61595 0.353553,-9.413359 0.353553,-9.413359" />
<path class="odd"
d="m 45.161782,73.75 c 0,0 1.534894,-3.679847 2.40625,-6.53125 0.871356,-2.851403 1.28125,-7.15625 1.28125,-7.15625" />
<path class="odd"
d="m 48.801947,56.125 c 0,0 0.234502,-1.809418 0.109835,-3.375 -0.124667,-1.565582 -0.5625,-3.1875 -0.5625,-3.1875" />
</g>
</svg>
<svg class="fingerprint fingerprint-active" xmlns="https://www.w3.org/2000/svg" width="100" height="100"
viewBox="0 0 100 100">
<g class="fingerprint-out" fill="none" stroke-width="2" stroke-linecap="round">
<path class="odd"
d="m 25.117139,57.142857 c 0,0 -1.968558,-7.660465 -0.643619,-13.149003 1.324939,-5.488538 4.659682,-8.994751 4.659682,-8.994751" />
<path class="odd"
d="m 31.925369,31.477584 c 0,0 2.153609,-2.934998 9.074971,-5.105078 6.921362,-2.17008 11.799844,-0.618718 11.799844,-0.618718" />
<path class="odd"
d="m 57.131213,26.814448 c 0,0 5.127709,1.731228 9.899495,7.513009 4.771786,5.781781 4.772971,12.109204 4.772971,12.109204" />
<path class="odd" d="m 72.334009,50.76769 0.09597,2.298098 -0.09597,2.386485" />
<path class="even"
d="m 27.849282,62.75 c 0,0 1.286086,-1.279223 1.25,-4.25 -0.03609,-2.970777 -1.606117,-7.675266 -0.625,-12.75 0.981117,-5.074734 4.5,-9.5 4.5,-9.5" />
<path class="even"
d="m 36.224282,33.625 c 0,0 8.821171,-7.174484 19.3125,-2.8125 10.491329,4.361984 11.870558,14.952665 11.870558,14.952665" />
<path class="even"
d="m 68.349282,49.75 c 0,0 0.500124,3.82939 0.5625,5.8125 0.06238,1.98311 -0.1875,5.9375 -0.1875,5.9375" />
<path class="odd"
d="m 31.099282,65.625 c 0,0 1.764703,-4.224042 2,-7.375 0.235297,-3.150958 -1.943873,-9.276886 0.426777,-15.441942 2.370649,-6.165056 8.073223,-7.933058 8.073223,-7.933058" />
<path class="odd"
d="m 45.849282,33.625 c 0,0 12.805566,-1.968622 17,9.9375 4.194434,11.906122 1.125,24.0625 1.125,24.0625" />
<path class="even"
d="m 59.099282,70.25 c 0,0 0.870577,-2.956221 1.1875,-4.5625 0.316923,-1.606279 0.5625,-5.0625 0.5625,-5.0625" />
<path class="even"
d="m 60.901059,56.286612 c 0,0 0.903689,-9.415996 -3.801777,-14.849112 -3.03125,-3.5 -7.329245,-4.723939 -11.867187,-3.8125 -5.523438,1.109375 -7.570313,5.75 -7.570313,5.75" />
<path class="even"
d="m 34.072577,68.846248 c 0,0 2.274231,-4.165782 2.839205,-9.033748 0.443558,-3.821814 -0.49394,-5.649939 -0.714206,-8.05386 -0.220265,-2.403922 0.21421,-4.63364 0.21421,-4.63364" />
<path class="odd"
d="m 37.774165,70.831845 c 0,0 2.692139,-6.147592 3.223034,-11.251208 0.530895,-5.103616 -2.18372,-7.95562 -0.153491,-13.647655 2.030229,-5.692035 8.108442,-4.538898 8.108442,-4.538898" />
<path class="odd"
d="m 54.391174,71.715729 c 0,0 2.359472,-5.427681 2.519068,-16.175068 0.159595,-10.747388 -4.375223,-12.993087 -4.375223,-12.993087" />
<path class="even"
d="m 49.474282,73.625 c 0,0 3.730297,-8.451831 3.577665,-16.493718 -0.152632,-8.041887 -0.364805,-11.869326 -4.765165,-11.756282 -4.400364,0.113044 -3.875,4.875 -3.875,4.875" />
<path class="even"
d="m 41.132922,72.334447 c 0,0 2.49775,-5.267079 3.181981,-8.883029 0.68423,-3.61595 0.353553,-9.413359 0.353553,-9.413359" />
<path class="odd"
d="m 45.161782,73.75 c 0,0 1.534894,-3.679847 2.40625,-6.53125 0.871356,-2.851403 1.28125,-7.15625 1.28125,-7.15625" />
<path class="odd"
d="m 48.801947,56.125 c 0,0 0.234502,-1.809418 0.109835,-3.375 -0.124667,-1.565582 -0.5625,-3.1875 -0.5625,-3.1875" />
</g>
</svg>
<svg class="ok" xmlns="https://www.w3.org/2000/svg" width="100" height="100" viewBox="0 0 100 100">
<path d="M34.912 50.75l10.89 10.125L67 36.75" fill="none" stroke="#fff" stroke-width="6" /></svg>
</div>
CSS
body {
align-items: center;
display: flex;
font-family: sans-serif;
font-weight: 600;
font-size: 26px;
height: 100vh;
justify-content: center;
margin: 0;
}
.container {
align-items: center;
background: #000;
border-radius: 40px;
box-shadow: 0 14px 28px rgba(0, 0, 0, 0.25), 0 10px 10px rgba(0, 0, 0, 0.22);
display: flex;
height: 80px;
justify-content: center;
position: relative;
width: 200px;
}
.text {
color: white;
position: absolute;
transition: opacity 300ms;
user-select: none;
-moz-user-select: none;
}
.fingerprint {
/* height: 80px; */
left: -8px;
opacity: 0;
position: absolute;
stroke: #777;
top: -9px;
transition: opacity 1ms;
}
.fingerprint-active {
stroke: #fff;
}
.fingerprint-out {
opacity: 1;
}
.odd {
stroke-dasharray: 0px 50px;
stroke-dashoffset: 1px;
transition: stroke-dasharray 1ms;
}
.even {
stroke-dasharray: 50px 50px;
stroke-dashoffset: -41px;
transition: stroke-dashoffset 1ms;
}
.ok {
opacity: 0;
}
.active.container {
animation: 6s Container;
}
.active .text {
opacity: 0;
animation: 6s Text forwards;
}
.active .fingerprint {
opacity: 1;
transition: opacity 300ms 200ms;
}
.active .fingerprint-base .odd {
stroke-dasharray: 50px 50px;
transition: stroke-dasharray 800ms 100ms;
}
.active .fingerprint-base .even {
stroke-dashoffset: 0px;
transition: stroke-dashoffset 800ms;
}
.active .fingerprint-active .odd {
stroke-dasharray: 50px 50px;
transition: stroke-dasharray 2000ms 1500ms;
}
.active .fingerprint-active .even {
stroke-dashoffset: 0px;
transition: stroke-dashoffset 2000ms 1300ms;
}
.active .fingerprint-out {
opacity: 0;
transition: opacity 300ms 4100ms;
}
.active .ok {
opacity: 1;
animation: 6s Ok forwards;
}
@keyframes Container {
0% {
width: 200px
}
6% {
width: 80px
}
71% {
transform: scale(1);
}
75% {
transform: scale(1.2);
}
77% {
transform: scale(1);
}
94% {
width: 80px
}
100% {
width: 200px
}
}
@keyframes Text {
0% {
opacity: 1;
transform: scale(1);
}
6% {
opacity: 0;
transform: scale(0.5);
}
94% {
opacity: 0;
transform: scale(0.5);
}
100% {
opacity: 1;
transform: scale(1);
}
}
@keyframes Ok {
0% {
opacity: 0
}
70% {
opacity: 0;
transform: scale(0);
}
75% {
opacity: 1;
transform: scale(1.1);
}
77% {
opacity: 1;
transform: scale(1);
}
92% {
opacity: 1;
transform: scale(1);
}
96% {
opacity: 0;
transform: scale(0.5);
}
100% {
opacity: 0
}
}
