108CSS3効果：太地図。

方法の一つ：達成3つのDIV。アイデアは、2つの（3）の内側層;（2）領域の色を変更するため、中間層の2つの円形のDIVの色含有量を有する、（1）黒と白のコンテンツの外側円形DIV階調ことにより、2つの上下の領域に分割されています領域の色内容の色を復元するために円形のdiv。太極拳、太極拳マップが回転します地図上にカーソルを置きます！
** CSSコード** 

`` `CSS：RUN 
<！DOCTYPE HTML> 
<HTML> 
<HEAD> 
    <METAのcharset =」。UTF-8 "> 
    <タイトル>太地</ TITLE> 
    <クラススタイル=" CP-ペンスタイル「> 
       * { 
           パディング：0; 
           マージン：0; 
       } 
       .outer { 
           背景：直線勾配（下に、白50％、黒人50％）; 
           マージン：オート100ピクセル; 
           幅：200pxの、
           高さ：200pxの、
           BORDER- RADIUS：50％; 
           位置：相対; 
           ボーダー：
           トランジション：すべての5S容易。
       } 
       .outer：ホバー{ 
           変換：回転（360deg）スケール（1.5）。
       } 
       .outer .LEFT { 
           背景：白; 
           幅：100ピクセル; 
           高さ：100pxに。
           境界半径：50％。
           位置：絶対; 
           左：0; 
           トップ：は50px; 
       } 
       .outer .LEFT .leftInner { 
           背景：黒。
           幅：40ピクセル; 
           高さ：40ピクセル; 
           境界半径：50％。
           位置：絶対; 
           左：30px; 
           トップ：30px; 
       }
       .outer .RIGHT { 
           背景：黒。
           幅：100ピクセル; 
           高さ：100pxに。
           境界半径：50％。
           位置：絶対; 
           右：0; 
           トップ：は50px; 
       } 
       .outer .RIGHT .rightInner { 
           背景：白; 
           幅：40ピクセル; 
           高さ：40ピクセル; 
           境界半径：50％。
           位置：絶対; 
           左：30px; 
           トップ：30px; 
       } 
    </スタイル> 
</ head> 
<body> 
<DIV CLASS = "外側"> 
    <DIV CLASS = "左"> 
        <DIV CLASS = "leftInner"> <

    <DIV CLASS = "右"> 
        <DIV CLASS = "rightInner"> </ div> 
    </ div> 
</ div> 
</ BODY> 
</ HTML> 
`` ` 


メソッド2：擬似クラスの実装。アイデア：（1）上下二つの領域にdivのうち外側の円形のグラデーションによって;（2）領域の色を変更するダミークラス、疑似円形の境界線の色クラスを追加、擬似クラス（3）ラウンド色復元領域の色内容を形。太極拳、太極拳マップが回転します地図上にカーソルを置きます！
** HTMLコード** 

： `` `HTML RUN 
<！DOCTYPE HTML> 
<HTML> 
<HEAD> 
    <METAのcharset = " UTF-8"> 
    <タイトル>太地</ TITLE> 
    <スタイル> 
        * { 
            マージン：0; 
            パディング：0; 
        } 
        DIV ,:前,: {後
            ボックス・サイズ：ボーダーボックス。
        } 
        #taiji { 
            位置：絶対。
            トップ：50％;
            左：50％; 
            幅：200pxの。
            高さ：200pxの。
            マージン：-100px 0 0 -100px。
            背景：リニアグラジエント（値は0deg、黒50％、白50％）。
            境界半径：50％。
            国境：1pxの黒の固体; 
        } 
        @keyframes泰治{ 
            から{ 
                変換：回転（値は0deg）スケール（1）。
            } 
            に{ 
                変換：回転（360deg）スケール（2）。
            } 
        } 
        #taiji：ホバー{ 
            アニメーション：泰治1S容易に0無限。
        } 
        #taiji：前に、#taiji：後{
            内容： ""; 
            表示ブロック; 
            位置：絶対; 
            幅：50％; 
            高さ：50％; 
            トップ：25％; 
            境界半径：50％。
            ボーダー：透明35px固体; 
        } 
        #taiji：{前
            左：0。
            ボーダー色：黒; 
            背景色：白; 
        } 
        #taiji：{後
            右：0。
            ボーダー色：白; 
            背景色：黒。
        } 
    </スタイル> 
</ head> 
<body> 
<DIV ID = "泰治"> </ div> 
</ BODY>

`` `
おすすめ
