image.png 鼠标移入前

    image.png鼠标移入右下角显示效果

    1. <button class="parent">
    2.   <span>Hover me</span>
    3. </button>
    1. .parent {
    2.   position: relative;
    3.   background: #7983ff;
    4.   padding: 0.5rem 1rem;
    5.   font-size: 1.2rem;
    6.   border: none;
    7.   color: white;
    8.   cursor: pointer;
    9.   outline: none;
    10.   overflow: hidden;
    11. }
    12. .parent span {
    13.   position: relative;
    14. }
    15. .parent::before {
    16.   --size: 0;
    17.   content: '';
    18.   position: absolute;
    19.   left: var(--x);   //使用了css自定义变量
    20.   top: var(--y);
    21.   width: var(--size);
    22.   height: var(--size);
    23.   background: radial-gradient(circle closest-side, pink, transparent);
    24.   transform: translate(-50%, -50%);
    25.   transition: width 0.2s ease, height 0.2s ease;
    26. }
    27. .parent:hover::before {
    28.   --size: 200px;
    29. }
    1. var btn = document.querySelector('.parent')
    2. btn.onmousemove = function(e) {
    3.   var x = e.pageX - btn.offsetLeft
    4.   var y = e.pageY - btn.offsetTop
    5.   btn.style.setProperty('--x', x + 'px')
    6.   btn.style.setProperty('--y', y + 'px')
    7. }

    setProperty() 方法用于设置一个新的 CSS 属性，同时也可以修改 CSS 声明块中已存在的属性。
    浏览器支持：
    image.png