Beispielcode zur Implementierung einer Kreisbahnanimation mit CSS3 und Tabellen-Tags

<div Klasse="animation_div">
        <Tabellenklasse="Tabellenklasse">
            <tr>
                <td></td>
                <td>
                    <div Klasse="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'}">
                        Farbenblindheit und Farbschwäche
                    </div>
                </td>
                <td></td>
            </tr>
            <tr>
                <td>
                    <div Klasse="space_div"></div>
                </td>
            </tr>
            <tr>
                <td>
                    <div Klasse="HR" ng-click="compriseClicked('HR')" ng-class="{isSelected:clickUrlKey=='HR'}">
                        Herzfrequenz
                    </div>
                </td>
                <td></td>
                <td>
                    <a href="#/app/custom_made/counselor/{{clickUrlKey}}" style="text-decoration: none;
                        Farbe: schwarz;">
                        <div Klasse="Start_Test">
                            <strong>Test starten</strong>
                        </div>
                    </a>
                </td>
                <td></td>
                <td>
                    <div Klasse = "fat_content" ng-click = "compriseClicked('fat_content')" ng-class = "{isSelected:clickUrlKey=='fat_content'}">
                        Fettgehalt
                    </div>
                </td>
            </tr>
            <tr>
                <td>
                    <div Klasse="space_div"></div>
                </td>
            </tr>
            <tr>
                <td></td>
                <td>
                    <div Klasse="WHR" ng-click="compriseClicked('WHR')" ng-class="{isSelected:clickUrlKey=='WHR'}">
                        Taille-Hüfte-Verhältnis
                    </div>
                </td>
                <td></td>
                <td>
                    <div Klasse = "safe_period" ng-click = "compriseClicked('safe_period')" ng-class = "{isSelected:clickUrlKey=='safe_period'}">
                        <strong>Sicherheitsfrist</strong>
                    </div>
                </td>
                <td></td>
            </tr>
        </Tabelle>
    </div>
    
    <h3>KlickURL-Schlüssel:{{KlickURL-Schlüssel}}</h3>

<Stil>
      /*Animation definieren*/
      
      @-webkit-keyframes round_animation {
          0 %{
              -webkit-transform:drehen(0Grad);
              Breite: 260px;
              Höhe: 260px;
          }
          100 %{
              -webkit-transform:drehen(360Grad);
              Breite: 260px;
              Höhe: 260px;
              links: 0px;
              oben: 0px;
          }
      }
      
      /*Definieren Sie den Stil des Rahmens*/
      /*Animation aufrufen und Animationsparameter festlegen*/
      
      .animation_div {
          -webkit-transform-origin:center center; /*Definieren Sie den Mittelpunkt der Rotation*/
          -webkit-animation:round_animation 15s unendliche Alternative; /*unendliche Alternative bedeutet sich wiederholende Animation*/
          
          Rand: 60px automatisch;
          Breite: 260px;
          Höhe: 260px;
          Rand: 1px tief schwarz;
          Rahmenradius: 130px;
          links: 0px;
          oben: 0px;
      }
      
      .animation_div stark {
          Schriftgröße: 12px;
      }
      
      .BMI {
          Breite: 50px;
          Höhe: 50px;
          Hintergrundfarbe: orange;
          Rahmenradius: 100px;
          Textausrichtung: zentriert;
          
          /*Vertikale Zentrierung des Textes*/
          vertikale Ausrichtung: Mitte;
          Zeilenhöhe: 50px;
      }
      
      .farbenblind {
          Breite: 50px;
          Höhe: 50px;
          Hintergrundfarbe: grün;
          Rahmenradius: 100px;
          Textausrichtung: zentriert;
          
          /*Vertikale Zentrierung des Textes*/
          vertikale Ausrichtung: Mitte;
          Zeilenhöhe: 50px;
      }
      
      .HR{
          Rand links: -15px;
          Breite: 50px;
          Höhe: 50px;
          Hintergrundfarbe: blau;
          Rahmenradius: 100px;
          Textausrichtung: zentriert;
          
          /*Vertikale Zentrierung des Textes*/
          vertikale Ausrichtung: Mitte;
          Zeilenhöhe: 50px;
      }
      
      .start_test {
          Breite: 60px;
          Höhe: 60px;
          Hintergrundfarbe: rot;
          Rahmenradius: 100px;
          Textausrichtung: zentriert;
          
          /*Vertikale Zentrierung des Textes*/
          vertikale Ausrichtung: Mitte;
          Zeilenhöhe: 50px;
      }
      
      .fetter_Inhalt {
          Rand links: 15px;
          Breite: 50px;
          Höhe: 50px;
          Hintergrundfarbe: grau;
          Rahmenradius: 100px;
          Textausrichtung: zentriert;
          
          /*Vertikale Zentrierung des Textes*/
          vertikale Ausrichtung: Mitte;
          Zeilenhöhe: 50px;
      }
      
      .WHR {
          Breite: 50px;
          Höhe: 50px;
          Hintergrundfarbe: lila;
          Rahmenradius: 100px;
          Textausrichtung: zentriert;
          
          /*Vertikale Zentrierung des Textes*/
          vertikale Ausrichtung: Mitte;
          Zeilenhöhe: 50px;
      }
      
      .sicherer_zeitraum {
          Breite: 50px;
          Höhe: 50px;
          Hintergrundfarbe: gelb;
          Rahmenradius: 100px;
          Textausrichtung: zentriert;
          
          /*Vertikale Zentrierung des Textes*/
          vertikale Ausrichtung: Mitte;
          Zeilenhöhe: 50px;
      }
      
      .space_div {
          Breite: 50px;
          Höhe: 50px;
          Hintergrundfarbe: klar;
          Rahmenradius: 100px;
      }
      
      .rightmenu_btn {
          Höhe: 60px;
          Schwimmer: keiner;
      }
      
      .rightmenu_btn Schaltfläche {
          Rand oben: 50px;
          Breite: 20px;
          Höhe: 60px;
          Rand: 1px durchgezogenes RGB (221, 221, 221);
          Rand rechts: 0px;
          schweben: rechts;
      }
      
      .istAusgewählt {
          Rand: 1px durchgehend rot;
      }
  </Stil>

angular.module('starter.controllers', [])
    .controller('healthCtrl', Funktion($scope, $location) {
        $scope.clickUrlKey = "BMI";
        $scope.compriseClicked = Funktion(clickUrlKey) {
            $scope.clickUrlKey = clickUrlKey;
        };
    })