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