CSS3 lädt Grafiken und Textbeispiele

Der Anwendungsbereich von CSS3 wird immer größer, insbesondere jetzt, wo Google Chrome den IE nach und nach ersetzt

Heute empfehle ich jedem besonders einen CSS3-Ladeeffekt

Natürlich ist er es ist kein reines CSS3. Der Titel ist vielleicht etwas mehrdeutig, aber die gelegentlichen js können ignoriert werden. Der Anhang bietet 28 verschiedene Ladeeffekte auf der mobilen Webseite, ohne Kompatibilitätsprobleme zu berücksichtigen

Verwendung:

1. Fügen Sie den CSS-Stil und JS im Header in Ihre Webseite ein

2 Sie mögen und kopieren den darin enthaltenen HTML-Code auf Ihre Webseite

(Achten Sie darauf, den JS am Ende von index.html nicht zu verpassen)

Siebzehn, Wirkung siebzehn

Nehmen Sie drei kleine Kugeln, zentrieren Sie sie vertikal und verteilen Sie sie auseinander Ändern Sie einfach die TranslateY-Werte der Kugeln nacheinander.

@keyframes leap_ball {  50% {
        transform: translateY(60px);
      }}

Achtzehn, Wirkung achtzehn

Drei kleine Kugeln, alle in horizontaler und vertikaler Richtung zentriert, und der Abstand zwischen den kleinen Kugeln wird durch den äußeren Rand vergrößert. Tatsächlich sind es die beiden auf der Die kleine Kugel dreht sich links und rechts um die mittlere Kugel. Dann können wir das übergeordnete Element der kleinen Kugel direkt drehen lassen, um den umgebenden Effekt der kleinen Kugeln auf beiden Seiten zu erzielen (wenn sich das übergeordnete Element dreht, dreht sich die mittlere Kugel). ist wegen seiner Kreisform nicht zu sehen. Er dreht sich und die Position in der Mitte ändert sich optisch nicht.

@keyframes wind_ball {  50% {
        transform: rotateZ(180deg);
      }  100% {transform: rotateZ(360deg);
      }}

Neunzehn, Effekt Neunzehn

Es gibt insgesamt fünf kleine Bälle, die die gleiche Animation ausführen, aber die Animationsverzögerungszeit jedes kleinen Balls ist unterschiedlich, was die Position des kleinen Balls bestimmt anders. Positionieren Sie die fünf kleinen Kugeln an der gleichen Position wie ein einheitlicher Startpunkt (hier positioniere ich die fünf kleinen Kugeln ganz rechts)

{animation: cool_ballP 2s linear infinite, cool_ballS 2s linear infinite;}@keyframes cool_ballP {  80% {
        right: 75%;    //到达终点，开始返回起点      }}
@keyframes cool_ballS {  80% {               //到达终点
        top: 25%;width: 20px;height: 20px;
      }  81% {               //开始返回起点，长度变大，宽度变小，模拟移动产生的形变top: 0;width: 25px;height: 15px;
      }  99% {               //到达起点top: 0;width: 25px;height: 15px;
      }   100% {             //恢复初始width: 20px;height: 20px;
      } 
    }

Zwanzig, Wirkung zwanzig

Insgesamt acht Stunden Der Ball wird in einem Kreis positioniert und die Breite und Höhe des Balls können geändert werden (die Änderung des Balls basiert auf der Mitte des Balls)

{animation: load_ball 1.6s linear infinite;}@keyframes load_ball {  50% {
        height: 0;width: 0;
      }  80% {height: 0;width: 0;
      }}

Einundzwanzig, Effekt einundzwanzig

Es gibt insgesamt drei Bälle und die Flugbahn jedes Balls ist still Das Gleiche. Hier habe ich die Mittelpunkte der drei kleinen Kugeln vertikal nach oben und die Mitte horizontal positioniert und sie dann in drei Schritten verschoben, zuerst in die untere rechte Ecke, dann in die untere linke Ecke und schließlich zurück in die Ausgangspunkt.

(Transparenzänderungen in der Mitte jeder Stufe hinzugefügt)

@keyframes triangle_ball {  16% {
        opacity: .6;
      }  33% {left: 100%;top: 100%;opacity: 1;
      }  50% {opacity: .6;
      }  66% {left: 0;top: 100%;opacity: 1;
      }  83% {opacity: .6;
      }  99% {top: 0;left: 50%;opacity: 1;
      }}

22. Effekt Zweiundzwanzig

Dies ähnelt einem rotierenden Zahnrad. Der Schlüssel liegt darin, wie man eines herstellt. In Form eines Zahnrads, a div wird verwendet, um den inneren Kreis des Randes zu bilden, und der äußere gezackte Rand des div besteht aus einer Pseudoklasse. Je breiter der Pseudoklassenrand, desto spärlicher sind die gezackten Kanten und umgekehrt.

Nachdem die Zahnräder fertig sind, fehlt nur noch das kleine rotierende Gehäuse.

Das obige ist der detaillierte Inhalt vonCSS3 lädt Grafiken und Textbeispiele. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!