Html
    Css
    Js

    
                        
@keyframes spin {
            to{transform:rotate(.5turn);}
        }
        @keyframes bg {
            50%{background: #655;}
        }
        .pie{width: 200px;height: 200px;background-color: yellowgreen;margin: 50px auto;border-radius: 50%;
            background-image: linear-gradient(to right,transparent 50%, #655 0);
            box-shadow: 25px 0 25px -25px black,
                        -25px 0 25px -25px black;
        }
        .pie:before{
            content: '';display: block;margin-left: 50%;height: 100%;
            border-radius: 0 100% 100% 0 / 50%;
            background-color: inherit;
            transform-origin:left;
            animation: spin 3s linear infinite,
                        bg 6s step-end infinite;
        }

                        
↑上面代码改变,会自动显示代码结果 jQuery调用版本:1.11.3
 立即下载

纯css3制作旋转饼状图

0