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)
Artikel empfehlen
Verwenden Sie CSS, um die Breite von INPUT in TD festzulegen
Als ich kürzlich mit C# ein Webprogramm erstellte,...
4 Funktionen, die durch das Transform-Attribut in CSS3 implementiert werden
In CSS3 können mit der Transformationsfunktion vi...
Kann Asynchronität in JavaScript „Await“ speichern?
Ich wusste vorher, dass man await verwenden muss,...
Wird die Tabelle durch ein Update in einer MySQL-Transaktion gesperrt?
Zwei Fälle: 1. Mit Index 2. Ohne Index Voraussetz...
Zusammenfassung mehrerer Fehlerprotokolle zum Einrichten und Wechseln von MySQL MHA
1: Fehler beim Replikationssatz masterha_check_re...
Vue importiert Echarts, um ein Linienstreudiagramm zu realisieren
In diesem Artikel wird der spezifische Code für d...
Welche Vorteile bietet die Verwendung des B+-Baumindex in MySQL?
Bevor wir dieses Problem verstehen, schauen wir u...
10 Tipps zum Entwerfen nützlicher, benutzerfreundlicher Webanwendungen
Hier sind 10 Tipps zum Entwerfen benutzerfreundli...
Zusammenfassung der 7 Protokolltypen in MySQL
In MySQL gibt es folgende Protokolldateien: 1: Pr...
So installieren Sie Tomcat in Docker und stellen das Springboot-Projekt-War-Paket bereit
Es ist ganz einfach, gehen Sie einfach zum Tutori...
Hinweise zu den Formularkomponenten des Elements
Elementform und Codeanzeige Weitere Einzelheiten ...
Beispiel für die Implementierung von Unterstreichungseffekten mit CSS und JS
In diesem Artikel werden hauptsächlich zwei Arten...
Implementierung der Funktion zum Hinzufügen einer Besuchszählung im GitHub+Jekyll-Blog in einer Minute mit JS
Inhaltsverzeichnis Fügen Sie dem GitHub+Jekyll-Bl...
Implementierung des Pycharm-Installationstutorials auf Ubuntu 18.04
Methode 1: Pycharm herunterladen und installieren...
Vergessen Sie nicht, den HTML-Tag zu schließen
Das Erstellen von Webseiten, die Webstandards ents...