纯css3制作旋转饼状图

代码如下：

HTML：

<div class="pie"></div>

CSS：

@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;
        }