水杯动画百分比效果

by gothic

HTML

<div class="box">
    <div class="wave"></div>
    <div class="digit-box">
        <div class="digit">
            <div class="digit-inner digit-10">0 9 8 7 6 5 4 3 2 1 0</div>
        </div><div class="digit">
            <div class="digit-inner digit-1">0 9 8 7 6 5 4 3 2 1 0</div>
    </div>
</div>

CSS

.box {
    position: relative;
    width: 250px; height: 250px;
    background: #e9e9e9;
    border-radius: 50%;
    overflow: hidden;
}
.wave {
    position: absolute; bottom: -450px;
    width: 100%; height: 200%;
    background-image: -webkit-linear-gradient(#13e5fc, #17a2ff);
    -webkit-mask:...