Question

我想用css制作这张图片。（不需要jquery和动作）怎么做？

https://www.google.hu/search?q=easy+pie+chart&rlz=1C1MSIM_enHU614HU614&espv=2&biw=1920&bih=979&source=lnms&tbm=isch&sa=X&ved=0CAYQ_AUoAWoVChMIzI-jvdSExgIVRrkUCh0jBQBX#imgrc=DSIkq4T-4XdNAM%253A%3BMH0ADANO8vzAwM%3Bhttp%253A%252F%252Fi1-scripts.softpedia-static.com%252Fscreenshots%252FEasy-pie-chart_1.png%3Bhttp%253A%252F%252Fwebscripts.softpedia.com%252Fscript%252FGraphs-and-Charts%252FEasy-pie-chart-75237.html%3B518%3B171

Answer 1

这非常复杂。

请参阅此演示：http://jsfiddle.net/d7vKd/871/

您几乎需要使用javascript / jquery来获得任何功能。

<div class="radial-progress" data-progress="0">
<div class="circle">
    <div class="mask full">
        <div class="fill"></div>
    </div>
    <div class="mask half">
        <div class="fill"></div>
        <div class="fill fix"></div>
    </div>
    <div class="shadow"></div>
</div>
<div class="inset">
    <div class="percentage"></div>
</div>

的Javascript

$('head style[type="text/css"]').attr('type', 'text/less');
less.refreshStyles();
window.randomize = function() {
    $('.radial-progress').attr('data-progress', Math.floor(Math.random() * 100));
}
setTimeout(window.randomize, 200);
$('.radial-progress').click(window.randomize);

// Read more here: https://medium.com/@andsens/radial-progress-indicator-using-css-a917b80c43f9

LESS

@import url(http://fonts.googleapis.com/css?family=Lato:100,300,400,700,900,100italic,300italic,400italic,700italic,900italic);

.radial-progress {
    @circle-size: 120px;
    @circle-background: #d6dadc;
    @circle-color: #97a71d;
    @inset-size: 90px;
    @inset-color: #fbfbfb;
    @transition-length: 1s;
    @shadow: 6px 6px 10px rgba(0,0,0,0.2);
    @percentage-color: #97a71d;
    @percentage-font-size: 22px;
    @percentage-text-width: 57px;

    margin: 50px;
    width:  @circle-size;
    height: @circle-size;

    background-color: @circle-background;
    border-radius: 50%;
    .circle {
        .mask, .fill, .shadow {
            width:    @circle-size;
            height:   @circle-size;
            position: absolute;
            border-radius: 50%;
        }
        .shadow {
            box-shadow: @shadow inset;
        }
        .mask, .fill {
            -webkit-backface-visibility: hidden;
            transition: -webkit-transform @transition-length;
            transition: -ms-transform @transition-length;
            transition: transform @transition-length;
            border-radius: 50%;
        }
        .mask {
            clip: rect(0px, @circle-size, @circle-size, @circle-size/2);
            .fill {
                clip: rect(0px, @circle-size/2, @circle-size, 0px);
                background-color: @circle-color;
            }
        }
    }
    .inset {
        width:       @inset-size;
        height:      @inset-size;
        position:    absolute;
        margin-left: (@circle-size - @inset-size)/2;
        margin-top:  (@circle-size - @inset-size)/2;

        background-color: @inset-color;
        border-radius: 50%;
        box-shadow: @shadow;
        .percentage {
            height:   @percentage-font-size;
            width:    @percentage-text-width;
            overflow: hidden;

            position: absolute;
            top:      (@inset-size - @percentage-font-size) / 2;
            left:     (@inset-size - @percentage-text-width) / 2;

            line-height: 1;
            .numbers {
                margin-top: -@percentage-font-size;
                transition: width @transition-length;
                span {
                    width:          @percentage-text-width;
                    display:        inline-block;
                    vertical-align: top;
                    text-align:     center;
                    font-weight:    800;
                    font-size:      @percentage-font-size;
                    font-family:    "Lato", "Helvetica Neue", Helvetica, Arial, sans-serif;
                    color:          @percentage-color;
                }
            }
        }
    }

    @i: 0;
    @increment: 180deg / 100;
    .loop (@i) when (@i <= 100) {
        &[data-progress="@{i}"] {
            .circle {
                .mask.full, .fill {
                    -webkit-transform: rotate(@increment * @i);
                    -ms-transform: rotate(@increment * @i);
                    transform: rotate(@increment * @i);
                }   
                .fill.fix {
                    -webkit-transform: rotate(@increment * @i * 2);
                    -ms-transform: rotate(@increment * @i * 2);
                    transform: rotate(@increment * @i * 2);
                }
            }
            .inset .percentage .numbers {
                width: @i * @percentage-text-width + @percentage-text-width;
            }
        }
        .loop(@i + 1);
    }
    .loop(@i);
}

简单的饼图只是没有jquery

1 个答案: