So implementieren Sie den Ladeanimationseffekt in CSS3

Heute zeigen wir Ihnen, wie Sie mit CSS3 einen Ladeanimationseffekt erstellen. Warum sollten wir Loadning verwenden, um Animationseffekte zu erstellen? Ich glaube, dass Ihre gesamte Verwirrung nach dem Lesen verschwinden wird.

Der erste Schritt besteht darin, eine statische kleine Chrysantheme zu zeichnen.

sk-fading-circle {
  width: 40px;
  height: 40px;
  position: relative;
}
.sk-fading-circle .sk-circle {
  width: 100%;
  height: 100%;
  position: absolute;
  left: 0;
  top: 0;
}
.sk-fading-circle .sk-circle:before {
  content: '';
  display: block;
  margin: 0 auto;
  width: 15%;
  height: 15%;
  background-color: #333;
  border-radius: 100%;
}
 
<div class="sk-fading-circle">
  <div class="sk-circle"></div>
  … //为缩减篇幅省略中间10个div
  <div class="sk-circle"></div>
</div>

Der Code ist wie oben. Die statische Chrysantheme besteht tatsächlich aus 12 kleinen Divs, die in einem äußeren Div verschachtelt sind. Das kleine Div wird mithilfe von border-radius in einen Kreis gezeichnet und mithilfe von margin: 0 auto; in der Mitte des oberen Rasters positioniert. Da die 12 kleinen Divs absolut positioniert sind, überlappen sie alle.

Der zweite Schritt besteht darin, die 12 überlappenden Kreise auszubreiten.

.sk-fading-circle .sk-circle2 { transform: rotate(30deg);}
.sk-fading-circle .sk-circle3 { transform: rotate(60deg);}
… //节省篇幅，每个圆每隔30度递增旋转
.sk-fading-circle .sk-circle12 { transform: rotate(330deg);}
 
<div class="sk-fading-circle">
  <div class="sk-circle1 sk-circle"></div>
  … //为缩减篇幅省略中间10个div
  <div class="sk-circle12sk-circle"></div>
</div>

Der Code ist wie oben. Verwenden Sie die Drehung der Transformation, um jeden Punkt zu drehen, um eine vollständige Chrysanthemenform zu bilden. Wenn Sie mit der Transformation nicht vertraut sind, schauen Sie sich das Bild unten an. Die Drehung der anderen Punkte können Sie selbst herausfinden:

Der dritte Schritt besteht darin, das zu steuern Opazitätsattribut durch Animation, sodass jeder Punkt ein- und ausgeblendet wird

@-webkit-keyframes sk-circleFadeDelay {
  0%, 39%, 100% { opacity: 0; }
  40% { opacity: 1; }
}
@keyframes sk-circleFadeDelay {
  0%, 39%, 100% { opacity: 0; }
  40% { opacity: 1; }
}
.sk-fading-circle .sk-circle:before {
  ……
  animation: sk-circleFadeDelay 1.2s infinite ease-in-out both;
}

sodass jeder Punkt synchron wie eine Ampel blinkt.

Der letzte Schritt besteht darin, die Animationsverzögerung für jeden Punkt einzustellen, um die Blinkzeit zu versetzen und den üblichen Chrysanthemen-Spinneffekt zu erzeugen

.sk-fading-circle .sk-circle2:before {animation-delay: -1.1s; }
.sk-fading-circle .sk-circle3:before { animation-delay: -1s; }
.sk-fading-circle .sk-circle4:before { animation-delay: -0.9s; }
… //为缩减篇幅省略中间代码
.sk-fading-circle .sk-circle12:before { animation-delay: -0.1s; }

Da es 12 Punkte gibt, beträgt das Blinkintervall Jeder Punkt ist 0,1 s lang, daher hat der erste Punkt keine Animationsverzögerung und blinkt sofort. Der zweite Punkt beginnt ab -1,1 s zu blinken (wenn Sie negative Zahlen nicht verstehen, lesen Sie bitte den Animationsartikel, was bedeutet, dass er ab diesem Zeitpunkt beginnt und der vorherige Animationseffekt nicht angezeigt wird). Danach wird jeder Punkt in Schritten von 0,1 s verzögert. Schließlich wird der übliche Chrysanthemen-Spinning-Loading-Effekt gebildet

Ich glaube, dass Sie durch diese Fallstudie vollständig gemeistert haben, wie man Loadning zum Erstellen von Animationseffekten verwendet. Weitere spannende Inhalte finden Sie in anderen verwandten Artikeln zum Thema PHP chinesische Website!

Verwandte Lektüre:

Wie man Leinwand verwendet, um die Interaktion zwischen dem Ball und der Maus zu realisieren

Wie man Leinwand zum Erstellen verwendet der Effekt der Partikelfontänen-Animation

css3 klicken, um Welleneffekte anzuzeigen

Das obige ist der detaillierte Inhalt vonSo implementieren Sie den Ladeanimationseffekt in CSS3. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!