Beispielcode zur Implementierung einer Kreisbahnanimation mit CSS3 und Tabellen-Tags

html: Tatsächlich werden mehrere durchgezogene Kreis-Divs gemäß dem Tabellen-Tag in einem gleichseitigen Sechseck angeordnet, in einen Div-Container eingefügt und dann der CSS3-Kreisrotationsanimationseffekt verwendet, um den äußersten Div-Container zu drehen. Vergessen Sie natürlich nicht, den äußeren Rand des Div-Containers auf einen Kreisbogen einzustellen.

<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>

CSS: Da es in der Kreisbahn 6 durchgezogene Kreise gibt, werden unterschiedliche Klassen zur Anpassung festgelegt. Daher gibt es in den durchgezogenen Kreisen einige doppelte Stile, die optimiert werden können. Wir werden hier nicht darauf eingehen.

<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>

JS: Der Code hier kann ignoriert werden, da er nichts mit dem Animationseffekt zu tun hat. Es handelt sich um ein Klick-Response-Ereignis.

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

Das Wirkungsdiagramm sieht wie folgt aus:

Das Obige ist der vollständige Inhalt dieses Artikels. Ich hoffe, er wird für jedermanns Studium hilfreich sein. Ich hoffe auch, dass jeder 123WORDPRESS.COM unterstützen wird.

<<: Analysieren Sie die Verwendung und Prinzipien von Vues Bereitstellung und Injektion

>>: Detaillierte Erklärung und praktische Übungen zum Mysql-Tuning-Erklärtool (empfohlen)

CSS3 realisiert Textreliefeffekt, Gravureffekt, Flammentext

Beispielcode zur Implementierung einer Kreisbahnanimation mit CSS3 und Tabellen-Tags

CSS3 realisiert Textreliefeffekt, Gravureffekt, Flammentext

Detailliertes Tutorial zum Erstellen eines privaten Git-Servers unter Linux

Was tun, wenn Sie bei der Installation von MySQL auf einem Mac das ursprüngliche Kennwort vergessen?

Beispielcode zum Konvertieren des Mysql-Abfrageergebnissatzes in JSON-Daten

Ich habe einige Websites zum Thema Wohndesign herausgesucht, die ich für gut halte.

Implementierungscode des JQuery-Schrittfortschrittsachsen-Plug-Ins

Zwei Boxmodelle in Webseiten (W3C-Boxmodell, IE-Boxmodell)

Detaillierte Erklärung der Linux-Less-Befehlsbeispiele

Zusammenfassung der allgemeinen Docker-Befehle und Tipps

Detaillierte Erläuterung des vollständigen Anwendungsbeispiels zur Entwicklung von Hyperf unter Docker

Artikel empfehlen

10 Gründe, warum Linux immer beliebter wird

Detaillierte Erläuterung der Prinzipien und Implementierungsmethoden der MySQL-Kontoverwaltung

So wählen und verwenden Sie PNG, JPG und GIF als Web-Bildformate

Zusammenfassung der MySQL-Verbundindizes

So zeigen Sie alle laufenden Prozesse in Linux an

Begrenzung der Anzahl kurzfristiger Zugriffe auf eine bestimmte IP basierend auf Nginx

Die aktuellen Einschränkungen von Nginx in einem Artikel verstehen (einfache Implementierung)

JavaScript implementiert einfache Rechnerfunktion

Detaillierte Erläuterung von vier Lösungen zur Implementierung von Inline-Scrolling auf Mobilgeräten

Lösungen für MySql-Abstürze und Dienststartfehler

Grundprinzipien des skalierbaren MySQL-Designs

Implementierung integrierter Module und benutzerdefinierter Module in Node.js

Eine kurze Analyse der Unterschiede zwischen Undo, Redo und Binlog in MySQL

Prozessdiagramm für die Ideenbereitstellung und Tomcat-Dienstimplementierung

Erstellen Sie ein Docker-Image mit Dockerfile