JS做旋转的小球

痛定思痛。 2021-12-12 10:59 257阅读 0赞

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
        <style type="text/css">
            body{
                background:rosybrown;
            }
            #box{
                width:300px;
                height:300px;
                overflow: inherit;
                border-radius: 50%;
                box-shadow: 30px 20px 8px lightpink;
                float: left;
                margin-left: 100px;
            }
            .box{
                width:300px;
                height:300px;
                overflow: inherit;
                float: left;
                margin-left: 100px;
            }
        </style>
    </head>
    <body>
    <div id="box" style="background:linear-gradient(0deg,deeppink,skyblue,yellow)">
    
    
    </div>
    <div class="box" id="box2" style="background:linear-gradient(0deg,deeppink,skyblue,yellow)">
            <input type="range" min="0" max="360" value="0" onchange="change(this.value);" >
    
    </div>
    <div id="box3" class="box" style="background:repeating-linear-gradient(0deg,deeppink,skyblue 10%,yellow 20%)">
        <input type="number" min="0" max="360"   id="text" >
        <input type="submit" id="btn"/>
    
    </div>
    <script type="text/javascript">
        var i=0;
        setInterval(change2,1);
        function change2() {
            i++;
            document.getElementById("box").style.background="linear-gradient("+i+"deg,deeppink,skyblue,yellow)";
        }
        function change(val){
            var x ="linear-gradient("+val+"deg,deeppink,skyblue,yellow)";
            document.getElementById("box2").style.background=x;
        }
        document.getElementById("btn").onclick= function () {
            var text = document.getElementById("text").value;
            document.getElementById("box3").style.background="linear-gradient("+text+"deg,deeppink,skyblue 10%,yellow 20%)";
        }
    </script>
    </body>
    </html>

思想就是用js去修改渐变的角度。

效果（没截动图）：

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2h1YWl4aWFvaGFpXzE_size_16_color_FFFFFF_t_70][]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2h1YWl4aWFvaGFpXzE_size_16_color_FFFFFF_t_70]: /images/20211211/6bb1432d4f074d6a8233f37857fa9111.png