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