css3畫半圓 ， 加上一點動畫

border-radius制作半圓與制作圓形的方法是一樣的，只是元素的寬度與圓角方位要配合一致，不同的寬度和高度比例，以及圓角方位，可以制作上半圓、下半圓、左半圓和右半圓效果。例如：
.semicircle {
      
      margin: 30px;
    }
    .top {
      width: 100px;/*寬度為高度的2倍*/
      height: 50px;
      border-radius: 50px 50px 0 0;/*圓角半徑為高度的值*/
    }
    .right {
      height: 100px;/*高度為寬度的2倍*/
      width: 50px;
      border-radius: 0 50px 50px 0;/*圓角半徑為寬度的值*/
    }
    .bottom {
      width: 100px;/*寬度為高度的2倍*/
      height: 50px;
      border-radius: 0 0 50px 50px;/*圓角半徑為高度的值*/
    }
    .left {
      width: 50px;
      height: 100px;/*高度為寬度的2倍*/
      border-radius: 50px 0 0 50px;/*圓角半徑為寬度的值*/
    }

　　

 

轉自：http://www.cnblogs.com/afuge/p/4631173.html

-----------------------------

補充下，需要，我的實際使用， 加了點動畫

 

 .circlebg{
    background-color: #0081EE;
    width: 200px;/*寬度為高度的2倍*/
    height: 100px;
    border-radius: 100px 100px 0 0;/*圓角半徑為高度的值*/

    -webkit-transform: rotate(320deg);
    filter:alpha(Opacity=70);
    -moz-opacity:0.7;
    opacity: 0.7; 

    //-webkit-animation:gogogo 2s infinite linear ;  // infinite 無限次

    -webkit-animation:gogogo 0.2s linear ;
}
@-webkit-keyframes gogogo {
    0%{        
        -webkit-transform: rotate(0deg);
        filter:alpha(Opacity=30);
        -moz-opacity:0.3;
        opacity: 0.3; 
    }
    50%{
        -webkit-transform: rotate(160deg);
        filter:alpha(Opacity=50);
        -moz-opacity:0.5;
        opacity: 0.5; 
    }
    100%{
        -webkit-transform: rotate(320deg);
        filter:alpha(Opacity=70);
        -moz-opacity:0.7;
        opacity: 0.7; 
    }
}

　　效果就是 一個0.2  會旋轉的一個半圓 效果。