使用css3变量创建炫酷悬停效果
原文地址：www.zcfy.cc/article/stunning-hover-effects-with-css-variables
效果：
主要使用css中的var做动画效果，代码如下：
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Document</title> 6 <style type="text/css"> 7 .button { 8 position: relative; 9 appearance: none; 10 background: #f72359; 11 padding: 1em 2em; 12 border: none; 13 color: white 14 font-size: 1.2em; 15 cursor: pointer; 16 outline: none; 17 overflow: hidden; 18 border-radius: 100px; 19 } 20 .button span { 21 position: relative; 22 } 23 .button::before { 24 --size: 0; 25 content: ''; 26 position: absolute; 27 left: var(--x); 28 top: var(--y); 29 width: var(--size); 30 height: var(--size); 31 background: radial-gradient(circle closest-side, #4405f7, transparent); 32 transform: translate(-50%, -50%); 33 transition: width .2s ease, height .2s ease; 34 } 35 .button:hover::before { 36 --size: 400px; 37 } 38 </style> 39 </head> 40 <body> 41 <div class="button"><span>测试按钮</span></div> 42 <script type="text/javascript"> 43 document.querySelector('.button').onmousemove = (e) => { 44 const x = e.pageX - e.target.offsetLeft 45 const y = e.pageY - e.target.offsetTop 46 e.target.style.setProperty('--x', `${ x }px`) 47 e.target.style.setProperty('--y', `${ y }px`) 48 } 49 </script> 50 </body> 51 </html>
