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: #151519; } * { box-sizing: border-box; } div { transform: scale(3); } div a { padding: 7px; border-radius: 999px; display: flex; float: left; margin: 4px; } div a:hover { background: rgba(255, 255, 255, 0.04); } .foryou svg path { stroke: #C1C1C1; transform-origin: center; transition: all 0.25s ease; } .foryou svg path:first-child { stroke-dasharray: 43; transform: rotate(240deg); } .foryou svg path:last-child { transform: rotate(0); } .foryou:hover path { stroke: #E6E6E6; } .foryou:hover path:first-child { stroke-dasharray: 40; } .foryou:hover path:last-child { transform: rotate(-90deg); } .graphs svg path { stroke: #C1C1C1; transform-origin: center; transition: all 0.25s ease; } .graphs svg path:nth-child(2) { stroke-dasharray: 4; stroke-dashoffset: 8; } .graphs svg path:last-child { stroke-dasharray: 4; stroke-dashoffset: 0; } .graphs:hover path { stroke: #E6E6E6; } .graphs:hover path:nth-child(2), .graphs:hover path:last-child { stroke-dashoffset: 4; } .screener svg path { stroke: #C1C1C1; transform-origin: center; transition: all 0.25s ease; } .screener svg path:last-child { stroke-dasharray: 3; stroke-dashoffset: 0; } .screener:hover path { stroke: #E6E6E6; } .screener:hover path:last-child { stroke-dashoffset: 3; } .settings svg circle { stroke: #C1C1C1; } .settings svg path { stroke: #C1C1C1; transform-origin: center; transition: all 0.25s ease; } .settings svg path:last-child { stroke-dasharray: 4; stroke-dashoffset: 0; } .settings:hover path { stroke: #E6E6E6; } .settings:hover path:last-child { stroke-dashoffset: 4; } </style> </head> <body> <div> <a href="#" class="foryou"> <svg width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg"> <path d="M15.9374 8.99975C15.9374 12.8312 12.8314 15.9373 8.99988 15.9373C5.1684 15.9373 2.06238 12.8312 2.06238 8.99975C2.06238 5.16828 5.1684 2.06226 8.99988 2.06226C12.8314 2.06226 15.9374 5.16828 15.9374 8.99975Z" stroke-width="1.12494" stroke-linecap="round" stroke-linejoin="round"/> <path d="M7.53387 8.20372C7.63051 7.88205 7.88218 7.63039 8.20384 7.53375L11.4374 6.56226L10.4659 9.79579C10.3692 10.1175 10.1176 10.3691 9.79591 10.4658L6.56238 11.4373L7.53387 8.20372Z" stroke-width="1.12494" stroke-linejoin="round"/> </svg> </a> <a href="#" class="graphs"> <svg width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg"&.........完整代码请登录后点击上方下载按钮下载查看
网友评论0