So implementieren Sie den Ladeanimationseffekt in CSS3

php中世界最好的语言
Freigeben: 2017-11-25 14:15:49
Original
1776 Leute haben es durchsucht

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>
Nach dem Login kopieren

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>
Nach dem Login kopieren

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;
}
Nach dem Login kopieren

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; }
Nach dem Login kopieren

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!

Verwandte Etiketten:
Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage
Über uns Haftungsausschluss Sitemap
Chinesische PHP-Website:Online-PHP-Schulung für das Gemeinwohl,Helfen Sie PHP-Lernenden, sich schnell weiterzuentwickeln!