svg+css实现鼠标悬停指纹按钮立体倾斜动画效果代码
代码语言:html
所属分类:悬停
代码描述:svg+css实现鼠标悬停指纹按钮立体倾斜动画效果代码
代码标签: 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.........完整代码请登录后点击上方下载按钮下载查看
网友评论0