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.........完整代码请登录后点击上方下载按钮下载查看