svg+css实现按钮悬浮边框发电闪电动画效果代码
代码语言:html
所属分类:悬停
代码描述:svg+css实现按钮悬浮边框发电闪电动画效果代码
代码标签: svg css 按钮 悬浮 边框 发电 闪电 动画
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width,initial-scale=1.0,maximum=1.0,minimum=1.0,user-scalable=0" /> <style> body{ background: black; padding: 100px; display: flex; } .voltage-button { position: relative; } .voltage-button button { color: white; background: #0D1127; padding: 1rem 3rem 1rem 3rem; border-radius: 5rem; border: 5px solid #5978F3; font-size: 1.2rem; line-height: 1em; letter-spacing: 0.075em; transition: background 0.3s; } .voltage-button button:hover { cursor: pointer; background: #0F1C53; } .voltage-button button:hover + svg, .voltage-button button:hover + svg + .dots { opacity: 1; } .voltage-button svg { display: block; position: absolute; top: -0.75em; left: -0.25em; width: calc(100% + 0.5em); height: calc(100% + 1.5em); pointer-events: none; opacity: 0; transition: opacity 0.4s; transition-delay: 0.1s; } .voltage-button svg path { stroke-dasharray: 100; filter: url("#glow"); } .voltage-button svg path.line-1 { stroke: #f6de8d; stroke-dashoffset: 0; animation: spark-1 3s linear infinite; } .voltage-button svg path.line-2 { stroke: #6bfeff; stroke-dashoffset: 500; animation: spark-2 3s linear infinite; } .voltage-button .dots { opacity: 0; transition: opacity 0.3s; transition-delay: 0.4s; } .voltage-button .dots .dot { width: 1rem; height: 1rem; background: white; border-radius: 100%; position: absolute; opacity: 0; } .voltage-button .dots .dot-1 { top: 0; left: 20%; animation: fly-up 3s linear infinite; } .voltage-button .dots .dot-2 { top: 0; left: 55%; animation: fly-up 3s linear infinite; animation-delay: 0.5s; } .voltage-button .dots .dot-3 { top: 0; left: 80%; animation: fly-up 3s linear infinite; animation-delay: 1s; } .voltage-button .dots .dot-4 { bottom: 0; left: 30%; animation: fly-down 3s linear infinite; animation-delay: 2.5s; } .voltage-button .dots .dot-5 { bottom: 0; left: 65%; animation: fly-down 3s linear infinite; animation-delay: 1.5s; } @keyframes spark-1 { to { stroke-dashoffset: -1000; } } @keyframes spark-2 { to { stroke-dashoffset: -500; } } @keyframes fly-up { 0% { opacity: 0; transform: translateY(0) scale(0.2); } 5% { opacity: 1; transform: translateY(-1.5rem) scale(0.4); } 10%, 100% { opacity: 0; transform: translateY(-3rem) scale(0.2); } } @keyframes fly-down { 0% { opacity: 0; transform: translateY(0) scale(0.2); } 5% { opacity: 1; transform: translateY(1.5rem) scale(0.4); } 10%, 100% { opacity: 0; transform: translateY(3rem) scale(0.2); } } </style> </head> <body> <div class="voltage-button"> <button>Button</button> <svg version="1.1" xmlns="http://www.w3.org/2000/svg" x="0px" y="0px" viewBox="0 0 234.6 61.3" preserveAspectRatio="none" xml:space="preserve"> <filter id="glow"> <feGaussianBlur class="blur" result="coloredBlur" stdDeviation="2"></feGaussianBlur> <feTurbulence type="fractalNoise" baseFrequency="0.075" numOctaves="0.3" result="turbulence"></feTurbulence> <feDisplacementMap in="SourceGraphic" in2="turbulence" scale="30" xChannelSelector="R" yChannelSelector="G" result="displace"></feDisplacementMap> <f.........完整代码请登录后点击上方下载按钮下载查看
网友评论0