使用css3变量创建炫酷悬停效果

原文地址：www.zcfy.cc/article/stunning-hover-effects-with-css-variables

效果：

主要使用css中的var做动画效果，代码如下：

 <!DOCTYPE html>

 <html lang="en">

 <head>

 <meta charset="UTF-8">

 <title>Document</title>

 <style type="text/css">

 .button {

     position: relative;

     appearance: none;

     background: #f72359;

     padding: 1em 2em;

     border: none;

     color: white

     font-size: 1.2em;

     cursor: pointer;

     outline: none;

     overflow: hidden;

     border-radius: 100px;

 }

 .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>

 <div class="button"><span>测试按钮</span></div>

 <script type="text/javascript">

 document.querySelector('.button').onmousemove = (e) => {

     const x = e.pageX - e.target.offsetLeft

     const y = e.pageY - e.target.offsetTop

     e.target.style.setProperty('--x', `${ x }px`)

     e.target.style.setProperty('--y', `${ y }px`)

 }

 </script>

 </body>

 </html>

巴特西

使用css3变量创建炫酷悬停效果

最新文章

热门文章