一个纯css完成一个加载图形

运用css3的特性完成一个半圆,css3动画效果完成旋转的效果..............(第一次发博客...)

直接上代码

style代码。。。。。。。。。。。。

  body{
            background-color: #000;
            opacity: 0.7;
        }
        #box{
            width: 100px;
            height: 100px;
            border:3px solid #47e8ff;
            border-bottom:3px solid transparent;
            border-radius: 100%;
            position: relative;
            margin: 200px auto;
            z-index: 100000;
        }

   #box:hover{
            /*transform: rotate(180deg);*/
            animation: aa 3s infinite linear;
        }
        @keyframes  aa{
            0%{
                transform: rotate(0deg);
            }
            100%{
                transform: rotate(720deg);
            }
        }

<div id="box">

</div>