CSS3 realisiert den Animationseffekt der Lotusblüte

Schauen wir uns zunächst die Wirkung an:

Dieser Effekt sieht ziemlich umwerfend aus, aber das Prinzip ist nicht kompliziert. Wenn ein Blütenblatt bewegt werden kann, können alle neun Blütenblätter erzeugt werden. Es handelt sich lediglich um eine Überlagerung von Effekten.

HTML:

<Abschnitt Klasse="Demo">  
  <div Klasse="Box">  
     <div Klasse="Blatt"></div>  
     <div Klasse="Blatt"></div>  
     <div Klasse="Blatt"></div>  
     <div Klasse="Blatt"></div>  
     <div Klasse="Blatt"></div>  
     <div Klasse="Blatt"></div> 
     <div Klasse="Blatt"></div>  
     <div Klasse="Blatt"></div>  
     <div Klasse="Blatt"></div>  
  </div>  
</Abschnitt>

CSS:

Code anzeigen 
Körper {
   Hintergrundfarbe: #000;
}      

.demo {
   Rand: 0px automatisch;
   Breite: 500px;
}
/*Behälter für Lotusblüten*/
.Kasten {
   position: relative;/*Relative Positionierung festlegen, da die Blütenblätter absolut positioniert sein müssen*/   
   Höhe: 400px;
   Rand oben: 400px
}
/*Absolute Positionierung der Blütenblätter*/
.Box .Blatt {
   Position: absolut;
}
/*Lotusblütenblätter zeichnen*/
.Blatt {
   Rand oben: 0px;
   Breite: 200px;
   Höhe: 200px;
   border-radius: 200px 0px;/*Blütenblattecken erstellen*/
   Hintergrund: -moz-linear-gradient(45deg,rgba(188,190,192,1) 8%,rgba(158,31,99,1) 30%,rgba(158,31,99,1) 100%);/*Blütenblattfarbe erstellen*/
        Hintergrund: -webkit-linear-gradient(45deg,rgba(188,190,192,1) 8%,rgba(158,31,99,1) 30%,rgba(158,31,99,1) 100%);/*Blütenblattfarbe erstellen*/
   Deckkraft: .6;
   Filter: Alpha (Deckkraft = 50);
   transformieren: drehen(135°);/*Blütenblätter um 135° drehen*/
   transform-origin: oben rechts;/*Setze den Ursprung der Blütenblattrotation zurück, das ist sehr wichtig*/
}

@keyframes show-2 {
    0% {
     transformieren: drehen (135 Grad);
    }
    50 % {
     transformieren: drehen (45 Grad);
    }
    100 %{
     transformieren: drehen (135 Grad);
    }
}
@keyframes show-3 {
    0% {
     transformieren: drehen (135 Grad);
    }
    50 % {
     transformieren: drehen (65 Grad);
    }
    100 %{
     transformieren: drehen (135 Grad);
    }
}
@keyframes show-4 {
    0% {
     transformieren: drehen (135 Grad);
    }
    50 % {
     transformieren: drehen (85 Grad);
    }
    100 %{
     transformieren: drehen (135 Grad);
    }
}
@keyframes show-5 {
    0% {
     transformieren: drehen (135 Grad);
    }
    50 % {
     transformieren: drehen (105 Grad);
    }
    100 %{
     transformieren: drehen (135 Grad);
    }
}
@keyframes show-6 {
    0% {
     transformieren: drehen (135 Grad);
    }
    50 % {
     transformieren: drehen (165 Grad);
    }
    100 %{
     transformieren: drehen (135 Grad);
    }
}
@keyframes show-7 {
    0% {
     transformieren: drehen (135 Grad);
    }
    50 % {
     transformieren: drehen (185 Grad);
    }
    100 %{
     transformieren: drehen (135 Grad);
    }
}
@keyframes show-8 {
    0% {
     transformieren: drehen (135 Grad);
    }
    50 % {
     transformieren: drehen (205 Grad);
    }
    100 %{
     transformieren: drehen (135 Grad);
    }
}  

@keyframes show-9 {
    0% {
     transformieren: drehen (135 Grad);
    }
    50 % {
     transformieren: drehen (225 Grad);
    }
    100 %{
     transformieren: drehen (135 Grad);
    }
}  

.leaf:n-tes-Kind(1) {
 Hintergrund: -moz-linear-gradient(45deg,rgba(250,250,250,1) 8%,rgba(158,31,99,1) 30%,rgba(158,31,99,1) 100%);/*Blütenblattfarbe festlegen*/
}
.leaf:n-tes-Kind(2) {
  Animation: Show-2, 6 s, unendliches Ein- und Ausblenden;
}
.leaf:n-tes-Kind(3) {
  Animation: Show-3, 6 s, unendliches Ein- und Ausblenden;
}
.leaf:n-tes-Kind(4) {
  Animation: Show-4, 6 s, unendliches Ein- und Ausblenden;
}
.leaf:n-tes-Kind(5) {
  Animation: Show-5, 6 s, unendliches Ein- und Ausblenden;
}
.leaf:n-tes-Kind(6) {
  Animation: Show-6, 6 s, unendliches Ein- und Aussteigen;
}
.leaf:n-tes-Kind(7) {
  Animation: Show-7, 6 s, unendliches Ein- und Ausblenden;
}
.leaf:n-tes-Kind(8) {
  Animation: Show-8, 6 s, unendliches Ein- und Ausblenden;
}
.leaf:n-tes-Kind(9) {
  Animation: Show-9, 6 s, unendliches Ein- und Ausblenden;
}

Oben finden Sie Einzelheiten dazu, wie Sie mit CSS3 den Animationseffekt einer Lotusblüte erzielen. Weitere Informationen zur Lotusblütenanimation in CSS3 finden Sie in den anderen verwandten Artikeln auf 123WORDPRESS.COM!

<<: Manuelle und geplante Sicherungsschritte für die MySQL-Datenbank

>>: Einige Frontend-Grundlagen (HTML, CSS) aus der Praxis