按钮点击烟花散开动画效果代码
代码语言:html
所属分类:表单美化
代码描述:按钮点击烟花散开动画效果代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en" > <head> <meta charset="UTF-8"> <style> @import url("https://fonts.googleapis.com/css2?family=Comfortaa:wght@400;600;700&display=swap"); :root { --mouse-x: -50px; --mouse-y: -50px; --mouse-btn-x: -50px; --mouse-btn-y: -50px; } html { height: 100%; } body { font-family: sans-serif; font-size: 14px; height: 100%; margin: 0; display: flex; align-items: center; justify-content: center; overflow: hidden; font-family: "Comfortaa", cursive; background-color: #e5eaf0; font-weight: 400; } .svg-background { position: absolute; left: -20vw; right: -20vw; bottom: 0; width: 140vw; } a { color: #7f71fe; text-decoration: none; font-weight: 700; } .btn { appearance: none; outline: 0; position: relative; overflow: hidden; display: inline-block; text-align: center; text-decoration: none; vertical-align: middle; cursor: pointer; -webkit-user-select: none; -moz-user-select: none; user-select: none; border: none; letter-spacing: 3px; line-height: 80px; height: 80px; width: 300px; padding: 0 30px; font-size: 32px; font-weight: 600; color: #fff; background-color: #7f71fe; border-radius: 5px; transition: all 0.3s ease-in; } .btn_text { pointer-events: none; position: relative; z-index: 2; } .btn:hover { background-color: #0074e8; } .link { position: fixed; bottom: 10px; left: 0; right: 0; text-align: center; font-size: 18px; } .link svg { position: relative; top: 5px; margin: 0 4px; } .mover { pointer-events: none; position: absolute; top: 0; left: 0; margin-top: -10px; margin-left: -10px; border-radius: 50%; left: var(--mouse-x); top: var(--mouse-y); height: 20px; width: 20px; background: rgba(255, 255, 255, 0.3); transform: scale(1.5); transition: all 0.1s ease-out; z-index: 1; } .mover.active { transform: scale(0.8); } .mouse { pointer-events: none; height: 30px; width: 30px; position: absolute; left: var(--mouse-btn-x); top: var(--mouse-btn-y); } .mouse .svg-2 { position: absolute; width: 70px; height: 70px; top: -40px; left: -40px; opacity: 0.7; } .mouse .svg-2 path { stroke: #1A1D2C; stroke: #A0C3F1; stroke: #bdd5ff; stroke-width: 3; stroke-linecap: round; stroke-dashoffset: 25%; stroke-dasharray: 100%; animation: svg2 1s linear forwards; } .mouse .svg-2 .svg_ob.........完整代码请登录后点击上方下载按钮下载查看
网友评论0