Mit CSS3 mehrere gängige Ladeeffekte erzielen Obwohl es sehr einfach ist, teile ich es dennoch, um Notizen zu machen ...
Der erste Effekt:
Der Code lautet wie folgt:
<p class="loading">
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
</p>Nach dem Login kopieren
Nach dem Login kopieren
Nach dem Login kopieren
.loading{
width: 80px;
height: 40px;
margin: 0 auto;
margin-top:100px;
}
.loading span{
display: inline-block;
width: 8px;
height: 100%;
border-radius: 4px;
background: lightgreen;
-webkit-animation: load 1s ease infinite;
}
@-webkit-keyframes load{
0%,100%{
height: 40px;
background: lightgreen;
}
50%{
height: 70px;
margin: -15px 0;
background: lightblue;
}
}
.loading span:nth-child(2){
-webkit-animation-delay:0.2s;
}
.loading span:nth-child(3){
-webkit-animation-delay:0.4s;
}
.loading span:nth-child(4){
-webkit-animation-delay:0.6s;
}
.loading span:nth-child(5){
-webkit-animation-delay:0.8s;
}Nach dem Login kopieren
Der zweite Effekt:
Der Code lautet wie folgt:
<p class="loading">
<span></span>
</p>Nach dem Login kopieren
.loading{
width: 150px;
height: 4px;
border-radius: 2px;
margin: 0 auto;
margin-top:100px;
position: relative;
background: lightgreen;
-webkit-animation: changeBgColor 1.04s ease-in infinite alternate;
}
.loading span{
display: inline-block;
width: 16px;
height: 16px;
border-radius: 50%;
background: lightgreen;
position: absolute;
margin-top: -7px;
margin-left:-8px;
-webkit-animation: changePosition 1.04s ease-in infinite alternate;
}
@-webkit-keyframes changeBgColor{
0%{
background: lightgreen;
}
100%{
background: lightblue;
}
}
@-webkit-keyframes changePosition{
0%{
background: lightgreen;
}
100%{
margin-left: 142px;
background: lightblue;
}
}Nach dem Login kopieren
Effekte 3-5:
Der Code lautet wie folgt:
<p class="loading">
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
</p>Nach dem Login kopieren
Nach dem Login kopieren
Nach dem Login kopieren
Die CSS-Stile des 3. bis 5. Effekts sind:
.loading{
width: 150px;
height: 15px;
margin: 0 auto;
position: relative;
margin-top:100px;
}
.loading span{
position: absolute;
width: 15px;
height: 100%;
border-radius: 50%;
background: lightgreen;
-webkit-animation: load 1.04s ease-in infinite alternate;
}
@-webkit-keyframes load{
0%{
opacity: 1;
-webkit-transform: translate(0px);
}
100%{
opacity: 0.2;
-webkit-transform: translate(150px);
}
}
.loading span:nth-child(1){
-webkit-animation-delay:0.13s;
}
.loading span:nth-child(2){
-webkit-animation-delay:0.26s;
}
.loading span:nth-child(3){
-webkit-animation-delay:0.39s;
}
.loading span:nth-child(4){
-webkit-animation-delay:0.52s;
}
.loading span:nth-child(5){
-webkit-animation-delay:0.65s;
}Nach dem Login kopieren
Effekte 6-8:
Der Code lautet wie folgt:
<p class="loading">
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
</p>Nach dem Login kopieren
Nach dem Login kopieren
Nach dem Login kopieren
Die CSS-Stile der 6.-8. Effekte sind:
.loading{
width: 150px;
height: 15px;
margin: 0 auto;
margin-top:100px;
text-align: center;
}
.loading span{
display: inline-block;
width: 15px;
height: 100%;
margin-right: 5px;
background: lightgreen;
-webkit-animation: load 1.04s ease infinite;
}
.loading span:last-child{
margin-right: 0px;
}
@-webkit-keyframes load{
0%{
opacity: 1;
}
100%{
opacity: 0;
}
}
.loading span:nth-child(1){
-webkit-animation-delay:0.13s;
}
.loading span:nth-child(2){
-webkit-animation-delay:0.26s;
}
.loading span:nth-child(3){
-webkit-animation-delay:0.39s;
}
.loading span:nth-child(4){
-webkit-animation-delay:0.52s;
}
.loading span:nth-child(5){
-webkit-animation-delay:0.65s;
}Nach dem Login kopieren
9.- 10 Effekte:
Der Code lautet wie folgt:
<p class="loadEffect">
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
</p>Nach dem Login kopieren
CSS-Stile sind:
.loadEffect{
width: 100px;
height: 100px;
position: relative;
margin: 0 auto;
margin-top:100px;
}
.loadEffect span{
display: inline-block;
width: 16px;
height: 16px;
border-radius: 50%;
background: lightgreen;
position: absolute;
-webkit-animation: load 1.04s ease infinite;
}
@-webkit-keyframes load{
0%{
opacity: 1;
}
100%{
opacity: 0.2;
}
}
.loadEffect span:nth-child(1){
left: 0;
top: 50%;
margin-top:-8px;
-webkit-animation-delay:0.13s;
}
.loadEffect span:nth-child(2){
left: 14px;
top: 14px;
-webkit-animation-delay:0.26s;
}
.loadEffect span:nth-child(3){
left: 50%;
top: 0;
margin-left: -8px;
-webkit-animation-delay:0.39s;
}
.loadEffect span:nth-child(4){
top: 14px;
rightright:14px;
-webkit-animation-delay:0.52s;
}
.loadEffect span:nth-child(5){
rightright: 0;
top: 50%;
margin-top:-8px;
-webkit-animation-delay:0.65s;
}
.loadEffect span:nth-child(6){
rightright: 14px;
bottombottom:14px;
-webkit-animation-delay:0.78s;
}
.loadEffect span:nth-child(7){
bottombottom: 0;
left: 50%;
margin-left: -8px;
-webkit-animation-delay:0.91s;
}
.loadEffect span:nth-child(8){
bottombottom: 14px;
left: 14px;
-webkit-animation-delay:1.04s;
}Nach dem Login kopieren
PS: Es gibt tatsächlich viele Wiederholungen von CSS-Stilcodes, hauptsächlich weil die Animationen unterschiedlich sind, aber für die Bequemlichkeit, sie in Zukunft direkt zu verwenden, aber wir werden es jetzt nicht organisieren.
Das Obige ist der gesamte Inhalt dieses Artikels. Ich hoffe, dass er zum Lernen aller beiträgt. Ich hoffe auch, dass jeder die PHP-Chinesisch-Website unterstützt.
Weitere verwandte Artikel zur Implementierung von 10 Ladeeffekten mit CSS3 finden Sie auf der chinesischen PHP-Website!
