利用css变量实现按钮悬浮效果

最新推荐文章于 2024-05-28 20:32:01 发布

weixin_33898876

最新推荐文章于 2024-05-28 20:32:01 发布

阅读量309

点赞数

CC 4.0 BY-SA版权

文章标签： javascript ViewUI

原文链接：https://juejin.im/post/5bd145a3e51d457aa4597ac4

本文介绍了一种使用CSS和JavaScript创建动态按钮悬停效果的方法。通过CSS伪元素和变量实现按钮背景的动态变化，JavaScript则用于获取鼠标位置，使效果更具交互性。

转自 www.zcfy.cc/article/stu…

css


<style>
        .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>
复制代码

HTML

<button class="button"><span>hover on me</span></button>
复制代码

javascript


<script>
    document.querySelector('.button').addEventListener('mousemove', function (e) {
        var x = e.pageX - e.target.offsetLeft
        var y = e.pageY - e.target.offsetTop
        e.target.style.setProperty('--x', `${ x }px`)
        e.target.style.setProperty('--y', `${ y }px`)
    })
</script>

复制代码

效果 codepen.io/lilong7676/…