高光小球（径向渐变&mousemove事件）

可以使用CSS3的径向渐变来做一个有高光的小球，然后这个小球看起来就非常立体了。

<style>
  .ball{
        width: 100px;
        height: 100px;
        border-radius: 50%;
        background-color: tomato;
        position: absolute;
        left: 100px;
        top: 100px;

        /* 径向渐变 在左30%、上30%的位置，从颜色白色2%渐变到西红柿色60%*/
        background: radial-gradient(at 30% 30%,#fff 2%, tomato 60%);
    }
</style>

<div class="ball"></div>
<script>
    // 亮光小球，实现鼠标移动，高光移动
    var ball=document.querySelector(".ball");
    ball.addEventListener("mousemove",mouseHandler);
    function mouseHandler(e){
        var x=e.offsetX/100*100+"%";//第一个100是求相对位移百分比，第二个100是小球的宽高
        var y=e.offsetY/100*100+"%";
        console.log(x,y);
        // ball.style.background="radial-gradient(at "+x+" "+y+",#fff 2%, tomato 60%)";
        // 用字符模板也行
        ball.style.background=`radial-gradient(at ${x} ${y},#fff 2%, tomato 60%)`;    
    }

</script>

结果如下，自己想让高光在哪，就在哪儿。