Heim >Web-Frontend >CSS-Tutorial >Wie kann man mit CSS einen kreisförmigen Effekt erzielen? (Codebeispiel)
Wie kann man mit CSS einen kreisförmigen Effekt erzielen? (Codebeispiel)
- 云罗郡主nach vorne
- 2018-10-23 15:13:402186Durchsuche
Der Inhalt dieses Artikels befasst sich mit der Frage, wie man mit CSS einen kreisförmigen Effekt erzielt. (Codebeispiel) hat einen gewissen Referenzwert. Freunde in Not können sich darauf beziehen. Ich hoffe, es wird Ihnen hilfreich sein.
Wir wussten vorher, dass CSS3-Animationseffekte aus drei Hauptteilen bestehen: Transformation, Übergang und Animation. In den ersten beiden Kapiteln haben wir den Deformationseffekt und den Übergangseffekt ausführlich erläutert. In diesem Kapitel erklären wir den „echten“ Animationseffekt in CSS3.
In CSS3 werden Animationseffekte mithilfe des Animationsattributs implementiert. Das Animationsattribut und das Übergangsattribut haben die gleiche Funktion. Sie erzielen beide Animationseffekte, indem sie den „Attributwert“ des Elements ändern. Es gibt jedoch einen großen Unterschied zwischen den beiden: Das Übergangsattribut kann Animationseffekte nur erzielen, indem der Startwert und der Endwert des Attributs angegeben werden und dann ein reibungsloser Übergang zwischen den beiden Attributwerten vorgenommen wird, sodass nur einfache Animationseffekte erzielt werden können . . Die Animationseigenschaft implementiert komplexe Animationseffekte, indem sie mehrere Keyframes definiert und die Attributwerte der Elemente in jedem Keyframe definiert.
Der obige Absatz ist sehr wertvoll und enthält die Antwort auf die verwirrendste Frage für Anfänger: „Was ist der Unterschied zwischen Animationsattributen und Übergangsattributen?“ Möglicherweise verstehen Sie es zunächst nicht, aber nachdem Sie dieses Kapitel gelesen haben, müssen Sie noch einmal zurückkommen und es sorgfältig lesen!
Nehmen wir zunächst ein Beispiel, damit jeder die Magie der CSS3-Animationseffekte spüren kann.
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>CSS3动画</title>
<style type="text/css">
div
{
width:100px;
height:100px;
border-radius:50px;
background-color:red;
}
@-webkit-keyframes mycolor
{
0%{background-color:red;}
30%{background-color:blue;}
60%{background-color:yellow;}
100%{background-color:green;}
}
div:hover
{
-webkit-animation-name:mycolor;
-webkit-animation-duration:5s;
-webkit-animation-timing-function:linear;
}
</style>
</head>
<body>
<div></div>
</body>
</html>Der Vorschaueffekt im Browser ist wie folgt:
Analyse:
Wie Sie sehen können, gibt es ein div-Element hier mit seinem Hintergrund Die Farbe ist rot. Wenn sich der Mauszeiger über das div-Element bewegt, ändert sich die Hintergrundfarbe des Elements in einer Reihe von Farben von Rot zu Blau, von Blau zu Gelb und von Gelb zurück zu Rot.
Stellen Sie sich vor, wenn Sie aufgefordert würden, das CSS3-Übergangsattribut zu verwenden, könnten Sie dies erreichen? Natürlich nicht. Denn das Übergangsattribut kann nur einen Änderungseffekt erzielen. Wir können verstehen, dass das Übergangsattribut nur eine einfache Animation (eine) implementieren kann, während das Animationsattribut eine komplexe Animation (eine Serie) implementieren kann.
Das Obige ist eine Einführung in die Verwendung von CSS, um einen kreisförmigen Effekt zu erzielen. (Codebeispiele) Vollständige Einführung. Wenn Sie mehr über CSS3-Video-Tutorials erfahren möchten, schauen Sie sich bitte die chinesische PHP-Website an.
Das obige ist der detaillierte Inhalt vonWie kann man mit CSS einen kreisförmigen Effekt erzielen? (Codebeispiel). Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!