用CSS实现Loading加载动画效果

加载动画用了伪元素来写。
这是HTML内容：

<div id="loader">
    Loading...
</div>

Style的内容：

        //body设置颜色为了看清效果
        body{
            background-color: green;
        }
        #loader{
            /*让填充的文字“消失”*/
            text-indent: -9999px;
            position: relative;
            width:200px;
            height:200px;
            box-shadow: inset 0 0 0 15px  #ffffff; /*设置内部阴影，为白色，宽度为15px,所以效果出来为一个白色的圆环，内部为背景颜色，环为白色*/
            border-radius: 50%;
        }
        /*挡住半边圆环*/
        /*他一直在绕着自身的那个点转，所以我们要给他重新规定点转*/
        #loader:before{
            animation: load-effect 3s infinite;
            /*绕着x=0  y=100px转*/
            transform-origin: 0 100px;
            position: absolute;
            content:'';
            width:100px;
            height:200px;
            background-color: green;
            left:100px;
            /*让遮罩也变成圆弧形状*/
            border-radius: 0 200px 200px 0;
        }
        /*和原本元素一样的样式，只不过背景颜色变浅，因为是after，他的层次会高一点，
        所以他覆盖了before的样式*/
        #loader:after{
            position: absolute;
            content: '';
            width:200px;
            height:200px;
            border-radius: 50%;
            left:0;
            box-shadow: inset 0 0 0 15px rgba(255,255,255,0.2);
        }
        @keyframes load-effect {
            0%{
                transform: rotate(0deg);
            }
            100%{
                transform: rotate(360deg);
            }
        }

效果图为：

哈哈哈，再放一张我喜欢的人喜欢的动漫~~~~