超級酷炫的懸浮效果
阿新 • • 發佈：2018-05-17
超級 ren parent view -c hover 來吧 技術 com
今天在奇舞周刊上看到了一篇文章，看到其酷炫的效果，自己忍不住試了一下，小夥伴們都驚呆了。。。這個效果是將光標移動到按鈕上的不同位置產生的彩色漸變。
代碼如下：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible"content="ie=edge"> <title>酷炫效果展示</title> <style> button { border: none; outline: none; color: white; font-size: 1.2em; cursor: pointer; border-radius: 100px; position: relative; appearance: none; background: #f72359; padding: 1em 2em; overflow: hidden; } button span { position: relative; } button::before { --size: 0; content: ‘‘; position: absolute; left: var(--x); top: var(--y); width: var(--size); height: var(--size); background: radial-gradient(circle closest-side, #4405f7, transparent); transform: translate(-50%, -50%); transition: width .2s ease, height .2s ease; } button:hover::before { --size: 400px; } </style> </head> <body> <button> <span>Hover me I‘m awesome</span> </button> <script> document.querySelector(‘button‘).onmousemove = (e) => { const x = e.pageX - e.target.offsetLeft const y = e.pageY - e.target.offsetTop var tag = e.target.tagName == ‘BUTTON‘ ? e.target : e.target.parentNode; tag.style.setProperty(‘--x‘, `${x}px`) tag.style.setProperty(‘--y‘, `${y}px`) } </script> </body> </html>
至於各行的代碼作用就需要自己探索了。。。
簡單的代碼就能實現這麽酷炫的效果，夥伴們get起來吧！！！
超級酷炫的懸浮效果