css3 色彩渐变&实现鼠标移动球体光点

色彩渐变

    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>

效果