svg+css实现鼠标悬停指纹按钮立体倾斜动画效果代码-html代码-BFW代码库

svg+css实现鼠标悬停指纹按钮立体倾斜动画效果代码

代码语言：html

所属分类：悬停

代码描述：svg+css实现鼠标悬停指纹按钮立体倾斜动画效果代码

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

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
<style>
    body {
  margin: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100vh;
  background-color: #1a1a1a;
}
svg {
  width: 60vmin;
  height: auto;
}
svg path {
  stroke-width: 0.5px;
}
figure {
  perspective: 2000px;
  transform-style: preserve-3d;
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: 1fr;
  place-items: center;
}
figure > * {
  grid-column: 1;
  grid-row: 1;
}
figure:hover svg {
  transform: rotatex(60deg) rotateZ(30deg) translateZ(var(--z, 0px));
}
figure:hover #bg {
  fill: transparent;
  stroke: white;
}
figure:hover #circle-1 {
  --z: 80px;
  fill: white;
  stroke: transparent;
}
svg {
  transform-origin: center center;
  transform-style: preserve-3d;
  transition: 600ms ease-in-out;
  transition-property: transform, fill, stroke;
}
#bg {
  stroke: transparent;
  fill: white;
}
#plus {
  stroke-dasharray: 2.5px;
  stroke: transparent;
  fill: rgba(99, 97, 206);
}
#circle-1 {
  fill: #f04405;
  stroke: transparent;
  stroke-dasharray: 4;
}
</style>
    </head>
    <body>

        <figure>
            <svg fill="none" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 172 30" class="Header-module--logo--edb3a" id="bg">
                <path fill-rule="evenodd" clip-rule="evenodd" d="M4.7 2.3a21.5 21.5 0 0 1 19.2 0A1 1 0 0 1 23 4 19.5 19.5 0 0 0 5.6 4a1 1 0 0 1-.9-1.7Zm1.7 3a19.8 19.8 0 0 1 15.8 0c2.6 1.2 4.8 3 6.3 5a1 1 0 0 1-1.6 1.2A14.2 14.2 0 0 0 21.4 7 17.5 17.5 0 0 0 7.3 7C5 8 3 9.8 1.8 11.5a1 1 0 0 1-1.6-1.1c1.4-2 3.7-4 6.2-5.1ZM14.2 7c5 0 9.4 2.5 11.6 6.2 1.2 2 1.6 4 1.6 5.6 0 2.8-2.6 4.6-5 4.6-1.1 0-2.3-.3-3.3-1-1-.8-1.7-2-1.7-3.6 0-.9-.5-1.5-1-2-.7-.4-1.5-.6-2.2-.6-1.8 0-3 1.3-3 2.6 0 1 .3 2.5.7 3.5.5 1 1.3 2.2 2 2.9 1.3 1.2 3 2.3 5.2 2.8a1 1 0 0 1-.4 1.9 12.6 12.6 0 0 1-8.5-6.8c-.6-1.2-1-3-1-4.3 0-2.5 2.4-4.5 5-4.5 1 0 2.2.3 3.2 1s1.8 1.9 1.9 3.5c0 1 .4 1.6 1 2 .5.4 1.3.7 2.2.7 1.5 0 3-1.2 3-2.7 0-1.3-.4-3-1.4-4.6a11.4 11.4 0 0 0-9.9-5.2c-3.7 0-7.7 1.8-9.8 5.2a9 9 0 0 0-1.2 4.9c0 2.4.4 3.4 1 5a1 1 0 1 1-1.8.8c-.7-1.8-1-3-1.2-5.8a10.9 10.9 0 0 1 1.6-5.9c2.4-4.1 7.1-6.1 11.4-6.2Zm-9 11.6c0-4.4 4.4-8 9-8 4.7 0 9.2 3.2 9.2 8.3a1 1 0 1 1-2 0c0-3.7-3.3-6.3-7.2-6.3-3.8 0-7 2.9-7 6 0 1.8.2 3.5 1.2 5.3a13.2 13.2 0 0 0 3 4 1 1 0 1 1-1.2 1.5 15.2 15.2 0 0 1-3.6-4.6c-1-2.1-1.4-4.1-1.3-6.2Zm9-.8c.6 0 1 .5 1 1a5.9 5.9 0 0 0 3 5.1c1.4.8 2.3 1 3.7 1a11.8 11.8 0 0 0 1.8-.1 1 1 0 1 1 .3 1.9l-2 .2c-1.8 0-3.1-.4-4.8-1.3a7.8 7.8 0 0 1-4-6.8c0-.5.5-1 1-1Z"></path>
                <path d="M38.4 14.1h5.9v2h-5.9v6.7h-2.6V7.2h9.6l-.3 2h-6.7v5Zm14-9.1c.4 0 .8.1 1.1.5.3.3.5.6.5 1 0 .5-.2 1-.5 1.2-.3.3-.7.5-1.2.5s-.9-.2-1.2-.5c-.3-.3-.4-.7-.4-1.1 0-.5.1-.9.4-1.2.4-.3.8-.4 1.2-.4ZM54 21h3.2v1.8H48v-1.9h3.6v-8.2H48v-1.9h6V21Zm6.1-10.2h2.2l.2 1.6a5 5 0 0 1 1.7-1.4 4.8 4.8 0 0 1 2.2-.5c1 0 1.9.3 2.4 1 .6.6.9 1.4.9 2.6v8.7h-2.6v-7.5a8 8 0 0 0 0-1.7c-.2-.4-.3-.7-.6-.8-.2-.2-.6-.3-1-.3-.6 0-1.1.1-1.6.5a4.9 4.9 0 0 0-1.2 1.2v8.6h-2.6v-12Zm23.4.6-1.5.3-2 .1a4 4 0 0 1 1.6 1.2c.4.5.6 1.1.6 1.9a3.9 3.9 0 0 1-2.2 3.5c-.7.3-1.6.5-2.5.5-.7 0-1.3 0-1.7-.2a1.2 1.2 0 0 0-.5 1c0 .6.5.9 1.5.9h2c1 0 1.7.1 2.3.4.7.3 1.2.7 1.6 1.2.3.5.5 1 .5 1.7a3 3 0 0 1-1.5 2.7c-1 .7-2.5 1-4.4 1-1.4 0-2.4-.1-3.2-.4a3 3 0 0 1-1.7-1.2 4 4 0 0 1-.4-2h2.2c0 .4 0 .7.3 1 .1.3.4.5.9.6l1.9.2c1.2 0 2-.2 2.6.........完整代码请登录后点击上方下载按钮下载查看