按钮点击四处开花效果
代码语言:html
所属分类:表单美化
代码描述:按钮点击四处开花效果
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <style> * { box-sizing: border-box; } body { background-color: #1c1c1c; display: flex; align-items: center; justify-content: center; margin: 0; min-height: 100vh; overflow: hidden; } button { background-color: rebeccapurple; border-radius: 5px; box-shadow: 4px 4px 5px rgba(255, 255, 255, 0.15); border: none; color: white; cursor: pointer; padding: 1rem 2rem; position: relative; transition: transform 0.1s linear, box-shadow 0.1s linear; z-index: 10; } button:active { transform: translate(4px, 4px); box-shadow: 0 0 0 rebeccapurple; } button:focus { outline: none; } .particle { --x: 0; --y: 0; background-color: rebeccapurple; border-radius: 50%; position: absolute; top: 50%; left: 50%; height: 5px; width: 5px; z-index: -1; } .particle.move { animation: move 1000ms linear forwards; } @keyframes move { to { transform: translate(var(--x), var(--y)); } 95% { opacity: 1; } 100% { opacity: 0; } } </style> </head> <body translate="no"> <button id="btn"> Make it Fire </button> <script> const btn = document.getElementById('btn'); btn.addEventListener('click', () => { const particles = []; const color = randomColor(); const particle = document.createElement('span'); particle.classList.add('particle', 'move.........完整代码请登录后点击上方下载按钮下载查看
网友评论0