svg+css实现悬浮指纹动画效果代码-html代码-BFW代码库

svg+css实现悬浮指纹动画效果代码

代码语言：html

所属分类：动画

代码描述：svg+css实现悬浮指纹动画效果代码

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


<!DOCTYPE html>
<html lang="en" >

<head>

  <meta charset="UTF-8">
  

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

.touch {
  stroke: white;
  stroke-dashoffset: 23;
  stroke-dasharray: 23;
  opacity: 0;
  transition: all 1s ease;
}

.fingerprint {
  transform: scale(2);
}
.fingerprint:hover path.touch {
  opacity: 1;
  stroke-dashoffset: 0;
  stroke-dasharray: 23;
}

.fey {
  position: fixed;
  bottom: 20px;
}
.fey svg {
  height: 16px;
}
</style>



</head>

<body translate="no" >
  <svg class="fingerprint" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M6.23454 19.3052C6.42429 18.8483 6.59884 18.3835 6.75758 17.9114M14.4235 21.0018C14.6981 20.2273 14.9417 19.4381 15.1528 18.6357C15.3443 17.9077 15.5091 17.1689 15.646 16.4204M19.6893 17.2526C20.0652 15.2266 20.2617 13.1377 20.2617 11.0028C20.2617 6.44492 16.5668 2.75 12.0089 2.75C10.7138 2.75 9.48836 3.04832 8.39758 3.57999M3.26172 15.1545C3.58481 13.8235 3.75605 12.4332 3.75605 11.0028C3.75605 9.20753 4.32931 7.54611 5.30276 6.19165M12.0093 11.0028C12.0093 13.8505 11.5478 16.5903 10.6955 19.1517C10.4762 19.8107 10.231 20.458 9.9611 21.0922M7.67682 14C7.8124 13.0204 7.88247 12.0198 7.88247 11.0028C7.88247 8.72388 9.72993 6.87642 12.0089 6.87642C14.2878 6.87642 16.1353 8.72388 16.1353 11.0028C16.1353 11.5049 16.1229 12.004 16.0985 12.5" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" stroke="#888F96"/>
  <path d="M6.23454 19.3052C6.42429 18.8483 6.59884 18.3835 6.75758 17.9114M14.4235 21.0018C14.6981 20.2273 14.9417 19.4381 15.1528 18.6357C15.3443 17.9077 15.5091 17.1689 15.646 16.4204M19.6893 17.2526C20.0652 15.2266 20.2617 13.1377 20.2617 11.0028C20.2617 6.44492 16.5668 2.75 12.0089 2.75C10.7138 2.75 9.48836 3.04832 8.39758 3.57999M3.26172 15.1545C3.58481 13.8235 3.75605 12.4332 3.75605 11.0028C3.75605 9.20753 4.32931 7.54611 5.30276 6.19165M12.0093 11.0028C12.0093 13.8505 11.5478 16.5903 10.6955 19.1517C10.4762 19.8107 10.231 20.458 9.9611 21.0922M7.67682 14C7.8124 13.0204 7.88247 12.0198 7.88247 11.0028C7.88247 8.72388 9.72993 6.87642 12.0089 6.87642C14.2878 6.87642 16.1353 8.72388 16.1353 11.0028C16.1353 11.5049 16.1229 12.004 16.0985 12.5" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="touch"/>
</svg>

<a href="https://feyapp.com" target="_blank" class="fey">
<svg width="74" height="30" viewBox="0 0 74 30" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M63.4521 17.2253L57.1162 6.72168H.........完整代码请登录后点击上方下载按钮下载查看