色彩渐变

    div{         width: 200px;         height: 200px;         border-radius: 50%;         /* 色彩到色彩渐变,默认从上到下 */         background: linear-gradient(#ff0000,#ffff00); 　

 

 

        /* 色彩渐变到什么方向，从左至右 */         background: linear-gradient(to right,#ff0000,#ffff00);         /* 角度色彩渐变 */         background: linear-gradient(60deg,#ff0000,#fff000);

 

 

        /* 多色彩渐变,上到下 */         background: linear-gradient(#ffaa00,#ff0000,#ffff00);         background: linear-gradient(#ffaa00 10%,#ff0000 30%,#ffff00 60%);

 

 

        /* 纯色百分比 */         background: linear-gradient(#ff0000 10%,#ffff00 50%);         /* 径向渐变, 一参在内圈,二参在外圈*/         background:radial-gradient(#ff0000,#ffff00);         background: radial-gradient(#ff0000,rgba(255,255,0,0));         /* 正圆和椭圆 */         background: radial-gradient(circle,#ff0000,#ffff00);         background-image: radial-gradient(ellipse ,#ff0000,#ffff00);           /* 从什么方向开始,at left和to right的区别是,只会从左,上和下没有 */         background: radial-gradient(at left,#ff0000,#ffff00);

 

 

        /* 从什么方向开始,示例为left:70%,top:30% */         background: radial-gradient(at 70% 30%,#ffffff 2%,#ff0000 70%);  

实现鼠标移动球体光点

    div{
        width: 200px;
        height: 200px;
        border-radius: 50%;
        /* 初始位置,left:70%,top:30% */
        background: radial-gradient(at 70% 30%,#ffffff 2%,#ff0000 70%);
    }

<script>
        document.querySelector("div").addEventListener("mousemove",mouseHandler);
        function mouseHandler(e){
            e.currentTarget.style.background = "radial-gradient(at "+e.offsetX/200*100+"% "+e.offsetY/200*100 +"%,"+"#ffffff 2%,#ff0000 70%)";
        }
</script>

效果