纯CSS+HTML制作饼图和条形图

使用html+css制作的图案或图形化内容响应速度最快，如下贴出我在开发过程中使用CSS+HTML制作的饼图和条形图，有需要的可以拿去。

CSS制作饼图

<div class="pie" style="animation-delay: -0.05s;"><span>5%</span></div>
<style type="text/css">
    @keyframes spin{
        to{transform: rotate(.5turn);}
    }
    @keyframes bg{
        50% {background: blue;}
    }
    .pie{
        position: relative;
        width: 200px; 
        height: 200px; 
        border-radius: 50%; 
        background: red;
        background-image:linear-gradient(to right, transparent 50%, blue 0);
    }
    .pie>span{
        position: absolute;
        line-height: 200px;
        width: 100%;
        color:#fff;
        text-align: center;
        font-size: 25px;
    }
    .pie::before{
        position: absolute;
        content: '';
        display: block;
        height: 100%;
        width: 50%;
        left: 50%;
        top: 0;
        border-radius: 0 100% 100% 0/50%;
        background-color: inherit;
        transform-origin: left;
        animation: spin .5s linear infinite,bg 1s step-end infinite;
        animation-play-state: paused;
        animation-delay: inherit;
    }
</style>

CSS制作条形图

<div class="barChart">
    <div class="x">
        <span>张三</span>
        <span>李四</span>
    </div>
    <div class="y">
        <div><span>0</span></div>
        <div><span>10</span></div>
        <div><span>20</span></div>
        <div><span>30</span></div>
        <div><span>40</span></div>
        <div><span>50</span></div>
    </div>
    <div class="bars">
        <div class="bar" style="height:150px;"><span>50</span></div>
        <div class="bar" style="height:90px;"><span>30</span></div>
    </div>
</div>
<style type="text/css">
    .barChart{
        position: relative;
        width: 80%;
        height: 400px;
    }
    .barChart>.x{
        bottom: 0;
        position: absolute;
        width: 100%;
        display: flex;
        flex-direction: row;
        align-items:flex-end;
        justify-content: space-around;
    }
    .barChart>.x>span{
        transform-origin:left top; 
        transform: rotate(45deg);
        width: 0;
        white-space: nowrap;
    }
    .barChart>.y{
        position: absolute;
        bottom: 30px;
        width: 100%;
        display: flex;
        flex-direction: column-reverse;
        align-items: flex-start;
        justify-content: flex-start;
    }
    .barChart>.y>div{
        border-bottom: 1px solid #00af16;
        width: 100%;
        height: 29px;
    }
    .barChart>.y>div>span{
        display: inline-block;
        transform: translateY(20px);
        margin-left: -40px;
        width: 30px;
        background: white;
        text-align: right;
    }
    .bars{
        position: absolute;
        bottom: 31px;
        width: 100%;
        display: flex;
        flex-direction: row;
        align-items: flex-end;
        justify-content: space-around;
    }
    .bars>.bar{
        width: 5%;
        background-image: linear-gradient(to right, #b8f123 0%, #b8f123 47%, #79a602 50%, #79a602 100%);
        display: inline-block;
    }
    .bars>.bar>span{
        display: block;
        text-align: center;
        margin-top: -22px;
    }
</style>

本文固定连接：https://code.zuifengyun.com/2019/05/1431.html，转载须征得作者授权。