Eine einfache Zusammenfassung und Wirkung von zweidimensionalen, dreidimensionalen und Gradientenprozessen in CSS 3 (Animationen sind schwer zu veröffentlichen)

1. Keine Bewegung, Veränderungen innerhalb des Bereichs (im Wesentlichen ein Bild erzeugend)

/*Gradient

          1 Für den Verlauf des Rechtecks ​​definieren Sie zunächst die Breite und Höhe des Rechtecks ​​(am besten fügen Sie zur besseren Beobachtung einen Rand hinzu)

                                                                                             /

Verwenden Sie

Hintergrundbild: -webkit-linear-gradient(right top,red 50%,blue 50%);

2 Die großen, mittleren und kleinen Kreise ändern zunächst ihre Farbe

/*Füllen Sie die Farbe der Reihe nach von innen nach außen aus*/

                                                                                                                                                                                                                                         );             /*Sie können im Rechteck auch einen kreisförmigen Farbverlauf verwenden*/

3 Reflexion

.testb{

Hintergrundbild: url(img/5.jpg);

Höhe: 200px;

/*Richtungsabstandsverlauf*/

/*oben oben unten*/

/*1 Reflexion nimmt nicht den Raum des Dokumentenflusses ein. Die Ebene ist höher als der Dokumentenfluss

2 Die Spiegelung basiert auf der Beschriftung (Breite und Höhe)*/

-webkit-box-reflect: Above 20px -webkit-linear-gradient(top,rgba(0,0,0,0) 0% ,rgba(0,0,0,0.5) 100%) ;

}

Die 4 Ränder sind relativ breit und die Farbe der 4 Rahmen ist unterschiedlich. In der Ecke der Begegnung wird ein Dreieck mit verschiedenen Farben gebildet.

5 5

Rahmenradius: 50px 0 50px 50px; wird zum Schneiden abgerundeter Ecken verwendet

Herstellung einer Ellipse

.textG{

Breite: 200px;

Höhe: 100px;

Rahmenradius: 100px 100px 100px 100px/50px 50px 50px 50px;

}

2. Bewegung in einer zweidimensionalen Ebene

.test{

transform:rotate(0deg) translator(0px,0px) scale(1);(drehen, verschieben, skalieren)                                                                                                                                                                                               

.test:hover{transform:rotate(720deg) translator(500px,300px) scale(2);}

Die drei Effekte können auch separat verwendet werden und die Effekte unterscheiden sich in unterschiedlicher Reihenfolge

3. Animationseffekte im dreidimensionalen Raum

body{perspective:1000px;}/*Perspektivpunkt zum Körper hinzufügen*/

                                                                                                                                                                                                                                                                       

                                                                                                                                                                     , Sie können es nicht hinzufügen, es gibt einen Standardwert)

                                                                                                                                                                       .test:hover{transform:rotate(720deg) translator(500px,300px) Scale(2);}(Position nach Änderung)

/*Wenn der 3D-Effekt aktiviert ist, können Sie den Z-Achsen-Effekt einstellen*/

4. Rahmenanimation

@keyframes Animationsname (selbst wählen){

0%(von){transform:…}

                                                                                    

                                                                                    

100 %(zu){transformieren:…}

}

 

.test:hover{

/*Der Animationseffekt wird auf die gleiche Weise zugewiesen wie der Übergang*/

Animation:movet 1s Leichtigkeit; /*Endlosschleife der Wortanzahl für die Animationsausführung unendlich */

Animationsiterationsanzahl: unendlich;

}