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)

Beispielcode einer in Vue3 gekapselten Lupenkomponente

CSS verwendet die Alibaba-Vektorbibliothek, um den entsprechenden Positionen schnell ansprechende Symboleffekte hinzuzufügen (Beispielcode).

Rufen Sie die Alibaba-Vektorsymbolbibliothek auf ...

Beispielcode zur Implementierung einer Kreisbahnanimation mit CSS3 und Tabellen-Tags

Beispielcode einer in Vue3 gekapselten Lupenkomponente

Verwendung von MySQL DDL-Anweisungen

Das rel-Attribut des HTML-Link-Tags

jQuery realisiert den Effekt der Sitzplatzauswahl und -reservierung im Theater

Verwenden Sie CSS, um einen kreisförmigen Welleneffekt zu erzielen

Freigabe der Schritte zum SVN-Dienstsicherungsvorgang

So erstellen Sie eine Baidu-Totlink-Datei

Analyse mehrerer Situationen, in denen der MySQL-Index fehlschlägt

So stellen Sie über Navicat eine Remoteverbindung zu MySQL her

Zusammenfassung von 7 Gründen, warum Docker nicht für die Bereitstellung von Datenbanken geeignet ist

Artikel empfehlen

Beispiel eines Befehls zur Linux-Hardwarekonfiguration

Mini-Programm implementiert Listen-Countdown-Funktion

CSS-Schreibstandards und -Reihenfolge teilen [für alle empfohlen]

Richtige Methode zum Laden von Schriftarten in Vue.js

Ein Beispiel dafür, wie Vue vierstufigen Navigations- und Verifizierungscode implementiert

Der eigentliche Prozess der Einbindung von Axios in das Projekt

Einführung in die wichtigsten Browser und ihre Kernel

Lösung für MySQL, das aufgrund einer übermäßigen Speicherkonfiguration nicht gestartet werden kann

Grafisches Tutorial zur Installation und Konfiguration der komprimierten Version von MySQL 8.0.11

Detaillierte Erläuterung der ECharts-Mausereignisverarbeitungsmethode

Schnelles Verständnis des Vue-Routing-Navigationsschutzes

Detaillierte Erläuterung der Cache-Konfiguration von Nginx Proxy_Cache

Detaillierte Erklärung der Destrukturierungszuweisung in JavaScript

So erstellen Sie Ihren eigenen privaten Nexus-Server unter Linux

CSS verwendet die Alibaba-Vektorbibliothek, um den entsprechenden Positionen schnell ansprechende Symboleffekte hinzuzufügen (Beispielcode).