悬浮指纹识别动画-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-.........完整代码请登录后点击上方下载按钮下载查看