悬浮指纹识别动画-html代码-BFW代码库

代码语言：html

所属分类：动画

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开


<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">

<style>
body {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
  background: #f1f3f6;
}

.container {
  width: 100%;
  height: 97vh;
}

svg {
  width: 80%;
  filter: drop-shadow( -1px -1px 1px rgb(55, 84, 170, 0.2));
}

.draw {
  opacity: 0;
  transition: opacity ease-in-out 1s;
}

.prints {
  opacity: 0;
}

.button {
  position: relative;
  width: 120px;
  height: 120px;
  background: #f1f3f6;
  border-radius: 50%;
  box-shadow: 
    inset 0 0 15px rgba(55, 84, 170, 0), 
    inset 0 0 20px rgba(255, 255, 255, 0), 
    10px 10px 18px rgba(55, 84, 170, 0.15), 
    -10px -10px 22px white, 
    inset 0px 0px 4px rgba(255, 255, 255, 0.2);
  transition: box-shadow 0.7s ease-in-out;
  display: flex;
  align-items: center;
  justify-content: center;
  outline: none;
  border: none;
  font-size: 0;
}

.button:hover, .button:focus {
  box-shadow: inset 7px 7px 15px rgba(55, 84, 170, 0.15), inset -7px -7px 20px white, 0px 0px 4px rgba(255, 255, 255, 0.2);
}

.button:hover .draw {
  opacity: 0.4;
}
.button:hover .prints{
  opacity: 1;
  transition: opacity ease-in-out 0.8s;
}

.button:before {
  content: '';
  width: 14px;
  height: 14px;
  background-color: #f1f3f6;
  border-radius: 50%;
  position: absolute;
  top: 110%;
  box-shadow: inset 2px 2px 5px rgba(55, 84, 170, 0.15), inset -2px -2px 5px white, 0px 0px 4px rgba(255, 255, 255, 0.2);
}

.button:after {
  --color: #ff99ac;
  content: '';
  width: 3px;
  height: 3px;
  background-color: white;
  border-radius: 50%;
  position: absolute;
  top: calc(110% + 6px);
  z-index: 9999;
  box-shadow: inset 0px 0px 1px var(--color), 
    0px 0px 2px var(--color), 
    0px 0px 3px var(--color), 
    0px 0px 4px var(--color),
    0px 0px 5px var(--color),
    0px 0px 6px var(--color),
    0px 0px 7px var(--color),
    0px 0px 20px var(--color),
    0px 0px 15px var(--color);
  animation: flash 0.6s infinite alternate forwards;
  transition: box-shadow 0.7s ease-in-out 0.5s;
}

.button:hover:after {
  --color: aqua;
}

@keyframes flash {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
</style>

</head>
<body translate="no">
<button class='button' type='button'>
press to scan fingerprint
<svg xmlns="http://www.w3.org/2000/svg" id="OBJECTS" viewBox="0 0 103.051 102">
<defs>
<pattern id="gif" height="100%" width="100%" patternContentUnits="objectBoundingBox">
<image height="1" width="1" preserveAspectRatio="none" xlink:href="https://media.giphy.com/media/dAWZiSMbMvObDWP3aA/giphy.gif" />
</pattern>
</defs>
<g class="prints" stroke="#fff">
<path fill="none" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2" d="M13.1 52.786s4.367-1.106 4.725-10.829 4.841-22.651 9.107-25.389" />
<path fill="none" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2" d="M28.984 14.686S40.423-.54 66.58 4.026" />
<path fill="none" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2" d="M75.173 11.689a43.984 43.984 0 00-19.836-3.077c-9.059.522-17.207 3.674-24.463 12.261-8.447 9.995-8.456 22.215-7.789 31.5.457 6.372-7.166 9.01-9.363 9.326" />
<path fill="none" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2" d="M82.387 84.332a4.85 4.85 0 01-1.987-3.344c-.423-2.428 1.032-9.714 2.486-13.691s3.346-12.64 3.427-16.456a32.465 32.465 0 00-.624-6.964" />
<path fill="none" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2" d="M75.383 18.957S86.59 26.26 88.491 39" />
<path fill="none" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2" d="M72.031 17s-19.474-9.522-35.118 4.62" />
<path fill="none" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2" d="M34.832 24.532s-2.749 3.991-2.5 4.091" />
<path fill="none" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2" d="M30.531 32.956s-2.172 9.127-2.224 13.506a87 87 0 01-.422 10.347c-.352 1.971-2.323 7.827-11.826 11.129" />
<path fill="none" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2" d="M16.845 74.418s6.676-3.673 8.717-5.643" />
<path fill="none" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2" d="M30.531 62.637a10.878 10.878 0 003.454-6.445c.751-4.334-.281-8.932 0-12.217s1.231-15.111 11.08-20.836 21.055-3.191 25.636 0 10.717 8.937 11.236 18.045a58 58 0 01-2.214 17.947" />
<path fill="none" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2" d="M19.692 81.044s12.7-9.13 16.077-15.873 4.692-9.9 4.223-14.33-.351-12.689 2.722-17.885a17.446 17.446 0 0110.815-7.673" />
<path fill="none" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2" d="M58.243 24.847a11.342 11.342 0 015.484.855" />
<path fill="none" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2" d="M67.241 27.317s6.887 3.331 7.932 10.463 1.046 13.234-.643 18.02-6.224 20.672-7.289 23.851S63.976 97.159 68.83 99.1" />
<path fill="none" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2" d="M78.178 65.209s-4.211 14.242-4.68 18.56-1.06 7.231 1.675 9.854" />
<path fill="none" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2" d="M60.167 102.915s-2.767-3.358-2.884-10.887a31.772 31.772 0 013.732-14.923c.845-1.689 6.57-15.079 7.884-20.913s1.838-14.646.45-19.2-5.143-7-12.182-6.34S48..........完整代码请登录后点击上方下载按钮下载查看