CSS3 とテーブルタグを使用して円軌道アニメーションを実装するためのサンプルコード

html: 実際には、テーブルタグに従っていくつかの実線の円 div を正六角形に配置し、div コンテナーに配置してから、CSS3 の円回転アニメーション効果を使用して、最も外側の div コンテナーを回転させます。もちろん、div コンテナーの外側の境界線を円弧に設定することを忘れないでください。

<div class="アニメーション_div">
        <テーブルクラス="テーブルクラス">
            <tr>
                <td></td>
                <td>
                    <div class="BMI" ng-click="compriseClicked('BMI')" ng-class="{isSelected:clickUrlKey=='BMI'}">
                        BMI
                    </div>
                </td>
                <td></td>
                <td>
                    <div class="color_blind" ng-click="compriseClicked('color_blind')" ng-class="{isSelected:clickUrlKey=='color_blind'}">
                        色覚異常と色弱
                    </div>
                </td>
                <td></td>
            </tr>
            <tr>
                <td>
                    <div class="space_div"></div>
                </td>
            </tr>
            <tr>
                <td>
                    <div class="HR" ng-click="compriseClicked('HR')" ng-class="{isSelected:clickUrlKey=='HR'}">
                        心拍
                    </div>
                </td>
                <td></td>
                <td>
                    <a href="#/app/custom_made/counselor/{{clickUrlKey}}" style="text-decoration: none;
                        色: 黒;">
                        <div class="start_test">
                            <strong>テストを開始する</strong>
                        </div>
                    </a>
                </td>
                <td></td>
                <td>
                    <div class="fat_content" ng-click="compriseClicked('fat_content')" ng-class="{isSelected:clickUrlKey=='fat_content'}">
                        脂肪含有量
                    </div>
                </td>
            </tr>
            <tr>
                <td>
                    <div class="space_div"></div>
                </td>
            </tr>
            <tr>
                <td></td>
                <td>
                    <div class="WHR" ng-click="compriseClicked('WHR')" ng-class="{isSelected:clickUrlKey=='WHR'}">
                        ウエストヒップ比
                    </div>
                </td>
                <td></td>
                <td>
                    <div class="safe_period" ng-click="compriseClicked('safe_period')" ng-class="{isSelected:clickUrlKey=='safe_period'}">
                        <strong>安全期間</strong>
                    </div>
                </td>
                <td></td>
            </tr>
        </テーブル>
    </div>
    
    <h3>クリック URL キー:{{クリック URL キー}}</h3>

CSS: 円形トラックには 6 つの実線円があるため、カスタマイズ用に異なるクラスが設定されています。そのため、実線円には重複したスタイルがいくつかありますが、最適化することができます。ここでは扱いません。

<スタイル>
      /*アニメーションを定義する*/
      
      @-webkit-keyframes ラウンドアニメーション {
          0%{
              -webkit-transform:rotate(0度);
              幅:260ピクセル;
              高さ:260px;
          }
          100%{
              -webkit-transform:rotate(360度);
              幅:260ピクセル;
              高さ:260px;
              左:0px;
              上:0px;
          }
      }
      
      /*フレームのスタイルを定義する*/
      /*アニメーションを呼び出してアニメーションパラメータを設定する*/
      
      .アニメーション_div {
          -webkit-transform-origin:center center; /*回転の中心点を定義します*/
          -webkit-animation:round_animation 15s 無限交互; /*無限交互はループアニメーションを意味します*/
          
          マージン: 60px 自動;
          幅:260ピクセル;
          高さ:260px;
          境界線: 1px 黒一色;
          境界線の半径: 130px;
          左:0px;
          上:0px;
      }
      
      .animation_div 強い {
          フォントサイズ: 12px;
      }
      
      .BMI {
          幅: 50px;
          高さ: 50px;
          背景色: オレンジ;
          境界線の半径: 100px;
          テキスト配置: 中央;
          
          /*テキストの垂直中央揃え*/
          垂直位置合わせ: 中央;
          行の高さ: 50px;
      }
      
      .色盲{
          幅: 50px;
          高さ: 50px;
          背景色: 緑;
          境界線の半径: 100px;
          テキスト配置: 中央;
          
          /*テキストの垂直中央揃え*/
          垂直位置合わせ: 中央;
          行の高さ: 50px;
      }
      
      .HR{
          左マージン: -15px;
          幅: 50px;
          高さ: 50px;
          背景色: 青;
          境界線の半径: 100px;
          テキスト配置: 中央;
          
          /*テキストの垂直中央揃え*/
          垂直位置合わせ: 中央;
          行の高さ: 50px;
      }
      
      .start_test {
          幅: 60ピクセル;
          高さ: 60px;
          背景色: 赤;
          境界線の半径: 100px;
          テキスト配置: 中央;
          
          /*テキストの垂直中央揃え*/
          垂直位置合わせ: 中央;
          行の高さ: 50px;
      }
      
      .fat_content {
          左マージン: 15px;
          幅: 50px;
          高さ: 50px;
          背景色: グレー;
          境界線の半径: 100px;
          テキスト配置: 中央;
          
          /*テキストの垂直中央揃え*/
          垂直位置合わせ: 中央;
          行の高さ: 50px;
      }
      
      .WHR {
          幅: 50px;
          高さ: 50px;
          背景色: 紫;
          境界線の半径: 100px;
          テキスト配置: 中央;
          
          /*テキストの垂直中央揃え*/
          垂直位置合わせ: 中央;
          行の高さ: 50px;
      }
      
      .安全期間{
          幅: 50px;
          高さ: 50px;
          背景色: 黄色;
          境界線の半径: 100px;
          テキスト配置: 中央;
          
          /*テキストの垂直中央揃え*/
          垂直位置合わせ: 中央;
          行の高さ: 50px;
      }
      
      .space_div {
          幅: 50px;
          高さ: 50px;
          背景色: クリア;
          境界線の半径: 100px;
      }
      
      .rightmenu_btn {
          高さ: 60px;
          フロート: なし;
      }
      
      .rightmenu_btn ボタン {
          上マージン: 50px;
          幅: 20px;
          高さ: 60px;
          境界線: 1px実線rgb(221, 221, 221);
          右境界線: 0px;
          フロート: 右;
      }
      
      .isSelected{
          境界線: 1px 実線の赤;
      }
  </スタイル>

JS: ここのコードはアニメーション効果とは関係がないので無視できます。これはクリック応答イベントです。

angular.module('starter.controllers', [])
    .controller('healthCtrl', 関数($scope, $location) {
        $scope.clickUrlKey = "BMI";
        $scope.compriseClicked = 関数(clickUrlKey) {
            $scope.clickUrlKey = クリックUrlKey;
        };
    })

効果図は以下のとおりです。