如何通过Jquery动态更新CSS Created图标

Question

我使用css3创建了一个框并在其中应用了一些渐变颜色方案。我想要实现的是我想通过JQuery根据百分比改变颜色并填充空白区域，但是我在逻辑上失败了我甚至用google搜索但没有找到合适的结果。

＆＃13;

＆＃13;

section {
                /* background: #dce7eb; */
                margin-top: 50px;
                width: 100%;
                height: 100%;
                display: flex;
                align-items: center;
            }

            .box {
                background: rgba(64,231,173,1);
                background: -moz-linear-gradient(left, rgba(64,231,173,1) 1%, rgba(68,237,168,1) 24%, rgba(77,248,157,1) 69%, rgba(82,255,151,1) 97%);
                background: -webkit-gradient(left top, right top, color-stop(1%, rgba(64,231,173,1)), color-stop(24%, rgba(68,237,168,1)), color-stop(69%, rgba(77,248,157,1)), color-stop(97%, rgba(82,255,151,1)));
                background: -webkit-linear-gradient(left, rgba(64,231,173,1) 1%, rgba(68,237,168,1) 24%, rgba(77,248,157,1) 69%, rgba(82,255,151,1) 97%);
                background: -o-linear-gradient(left, rgba(64,231,173,1) 1%, rgba(68,237,168,1) 24%, rgba(77,248,157,1) 69%, rgba(82,255,151,1) 97%);
                background: -ms-linear-gradient(left, rgba(64,231,173,1) 1%, rgba(68,237,168,1) 24%, rgba(77,248,157,1) 69%, rgba(82,255,151,1) 97%);
                background: linear-gradient(to right, rgba(64,231,173,1) 1%, rgba(68,237,168,1) 24%, rgba(77,248,157,1) 69%, rgba(82,255,151,1) 97%);
                filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#40e7ad', endColorstr='#52ff97', GradientType=1 );
                width: 66px;
                height: 80px;
                display: inline-block;
                margin:0 auto;

                position: relative;
                -webkit-border-bottom-right-radius: 6px;
                -webkit-border-bottom-left-radius: 6px;
                -moz-border-radius-bottomright: 6px;
                -moz-border-radius-bottomleft: 6px;
                border-bottom-right-radius: 6px;
                border-bottom-left-radius: 6px;
            }

            .box i {
                position:relative;
                width: 58px;
                height:70px;
                background:#fff;
                display:block;
                margin:5px auto;
                border-radius: 5px;
            }

            .box:hover span {
                transform: rotate(-45deg);
                transition: transform 250ms;
            }

＆＃13;

<section>
    <span class="box">
        <span></span>
        <i></i>
    </span>
</section>

＆＃13;

＆＃13;

＆＃13;

目前盒子处于空状态我假设盒子是100％的0％我想要做的是我想通过jquery动态填充空白区域也随着％增加而改变盒子的背景。就像我jquery代码遇到50作为数字，即50％然后jquery应该改变背景颜色并填充50％的框。

我很难实现它。任何人都可以帮我解释这个逻辑吗？

Answer 1

这样的事情应该做 - 这会将某个数字视为数字，并用它来设置渐变百分比

var n = $( "div" ).length; //number
var nOver = n+1;
$('.box').css('background','-webkit-linear-gradient(left, rgba(174,188,191,1) 0%,rgba(110,119,116,1) '+n+'%,rgba(10,14,10,1) '+nOver+'%,rgba(10,8,9,1) 100%)');

var n = $( "i" ).length; //number
    var nOver = n+1;
    $('.box').css('background','-webkit-linear-gradient(left, rgba(174,188,191,1) 0%,rgba(110,119,116,1) '+n+'%,rgba(10,14,10,1) '+nOver+'%,rgba(10,8,9,1) 100%)');

section {
                /* background: #dce7eb; */
                margin-top: 50px;
                width: 100%;
                height: 100%;
                display: flex;
                align-items: center;
            }

            .box {
                background: rgba(64,231,173,1);
                
                width: 66px;
                height: 80px;
 
                margin:0 auto;


            }

            .box i {
                position:relative;
                width: 58px;
                height:70px;
                
                display:block;
                margin:5px auto;
                border-radius: 5px;
            }

            .box:hover span {
                transform: rotate(-45deg);
                transition: transform 250ms;
            }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>


<p>test gradient</p>

<section>
    <span class="box">
        <span></span>
        <i></i>
        <i></i>
        <i></i>
        <i></i>
        <i></i><i></i><i></i>
        <i></i>
        <i></i>
        <i></i>
        <i></i>
        <i></i>
        <i></i>
        <i></i>
        <i></i>
        <i></i>
        <i></i>
        <i></i>
        <i></i>
        <i></i>
        <i></i>
        <i></i>
        <i></i>
        <i></i>
        <i></i>
    </span>
</section>