css3怎么實現(xiàn)一個矩形的倒計時效果

如果是用react ,結(jié)合styled-components的計算屬性，是比較簡單簡單的，只要獲取數(shù)據(jù)。 有幾個react的組件庫都有環(huán)形進度條可供使用

已經(jīng)解決了

<style>
    .progress {
        width: 100px;
        height: 100px;
        background-color: red;
        display: flex;
        justify-content: center;
        align-items: center;
        overflow: hidden;
        position: relative;
    }

    .circle {
        position: absolute;
        width: 200px;
        height: 200px;
    }

    .circle .left div,
    .circle .right div {
        background-color: rgba(0, 0, 0, .3);
    }

    .left,
    .right {
        width: 99px;
        height: 200px;
        overflow: hidden;
        float: left;
        position: relative;
    }

    .left div,
    .right div {
        width: 100px;
        height: 200px;
        transform-origin: right center;
        transform: rotateZ(-180deg);
    }

    .right div {
        transform-origin: left center;
    }
</style>
<div class="progress">
    <span class="text">0</span>
    <div class="circle">
        <div class="left">
            <div></div>
        </div>
        <div class="right">
            <div></div>
        </div>
    </div>
</div>
<script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.js"></script>
<script>
    function setCircle(oClass, num, n) {
        var aEle = $(oClass),
            Rdeg = num > n ? n : num,
            Ldeg = num > n ? num - n : 0;

        aEle.find('.text').text(num);
        aEle.find('.right>div').css('transform', "rotateZ(" + (360 / (2 * n) * Rdeg) + "deg)");
        aEle.find('.left>div').css('transform', "rotateZ(" + (360 / (2 * n) * Ldeg) + "deg)");
    }
    setCircle('.progress', 7, 10);
</script>