Eine Vielzahl von Ladeanimationen zum Teilen

Eine Vielzahl von Ladeanimationsfreigaben:

Effekt dreiundzwanzig

Zwei Quadrate, die Initiale Die Positionierung erfolgt nach links oben (oben: 0; links: 0;);

Eine vollständige Bewegung ist in vier Phasen unterteilt: In der ersten Phase bewegt sich die obere Linke um 90° gedreht nach oben rechts, und die Breite und Höhe werden reduziert; Zwei Stufen: Bewegen Sie die obere rechte Seite nach unten rechts, drehen Sie sie um 180 ° und stellen Sie die Breite und Höhe wieder her, verschieben Sie die untere rechte Seite nach unten links, drehen Sie sie um 270 ° und reduzieren Sie sie Die Breite und Höhe; die vierte Stufe, bewegen Sie sich von unten nach links, drehen Sie sich um 360°, antworten Sie auf Breite und Höhe.

Die Zeitdifferenz der Animationsverzögerung ist eine negative halbe Animationszeit.

{:;:;:;:;
      }{:;:;:;:;
      }{:;:;:;:;
      }{:;:;:;:;
      }

Vierundzwanzig, Wirkung vierundzwanzig

Ähnlich wie beim Schlageffekt einer Flamme positionieren Sie die drei quadratischen Divs so, dass sie horizontal zentriert und vertikal unten sind, und die anfängliche Breite und Höhe werden festgelegt auf 0.

Während Sie sich nach oben bewegen, ändern Sie die Breite und Höhe des Quadrats.

{animation: fire_ball 1.5s linear infinite;}@keyframes fire_ball {  50% {
        height: 30px;width: 30px;top: 50%;
      }  100% {height: 0;width: 0;top: 0;
      }}

Fünfundzwanzig, Effekt fünfundzwanzig

Es ist dem Spiel, das ich als Kind gespielt habe, sehr ähnlich – Pac-Man

Die Produktion von Pac-Man auf der links: Die Breite und Höhe der beiden Divs beträgt 0. Legen Sie nur den Rand fest und setzen Sie das Farbattribut des rechten Rands auf transparent. Der Code und der Effekt lauten wie folgt:

.pac_head {  border: 25px solid #fff;  border-right-color: transparent;  border-radius: 50%;
    }

Pac-Mans Mund ist fertig. Die verbleibenden zwei Divs sind eines, das sich vorwärts auf der Z-Achse dreht, und eines, das sich in der entgegengesetzten Richtung der Z-Achse dreht Die Essaktion wird durchgeführt.

Die drei kleinen Bälle auf der rechten Seite sind alle so eingestellt, dass sie sich in die Mitte der rechten Seite bewegen und sich auf Pac-Mans Mund zubewegen. Passen Sie einfach die Animationszeit der Bälle und Pac-Man entsprechend an.

@keyframes pac_ball {  100% {
        right: 55%;
      }}

Sechsundzwanzig, Wirkung sechsundzwanzig

Springendes Papier

Die Schwierigkeit dieses Effekts liegt darin, wie man den Effekt des Fallens und der Verformung erzeugt. Es ist eigentlich ganz einfach. Zunächst müssen Sie verstehen, dass ein Quadrat, solange es um ein Vielfaches von 90 um die Z-Achse gedreht wird, genau so aussieht wie das Originalbild. Dann ist es sehr einfach, diesen Effekt zu erzeugen Sie müssen in Betracht ziehen, jeder Ecke einen Verformungseffekt hinzuzufügen.

Verformungseffekt: Ändern Sie einfach den Wert des Randradius, um diese Art von Verformung zu erzeugen.

@keyframes beat_ball {  25% {
        transform: translateY(25%) rotate(22.5deg);//下落border-bottom-right-radius: 10%;
      }  50% {border-bottom-right-radius: 100%;transform: translateY(50%) scale(1, 0.8) rotate(45deg)   //scale，是为了让形变看起来有弹性      }  75% {transform: translateY(25%) rotate(67.5deg)   //上升      }  100% {transform: translateY(0) rotate(90deg)        //旋转90°结束一个周期，刚好和初始状态一模一样，那就直接重复执行动画即可      }}

Der Schatteneffekt ist noch besser. Erstellen Sie eine flache Ellipse, einen Kastenschatten, fügen Sie den Schatteneffekt hinzu und ändern Sie die Größe zum richtigen Zeitpunkt.

@keyframes beat_shadow {  50%{
        transform: scale(1.25,0.8);
      }}

Siebenundzwanzig, Effekt siebenundzwanzig

Ein Div und eine Pseudoklasse werden erstellt.

Das Div ist für die Rotation verantwortlich und die Pseudoklasse ist für die Änderung der Höhe verantwortlich. Jede Klasse erfüllt ihre eigenen Aufgaben.

@keyframes locker_ball {           //div旋转
      25%{
        transform: rotateZ(180deg);
      }  50%{transform: rotateZ(180deg);
      }  75%{transform: rotateZ(360deg);
      }  100%{transform: rotateZ(360deg);
      }}
    @keyframes locker_ballh {     //伪类高度改变
      25%{
        height: 40px;
      }  50%{height: 0;
      }  75%{height: 0;
      }  100%{height: 40px;
      }}

Achtundzwanzig, Wirkung achtundzwanzig

Der Effekt der Uhr (meine Positionierung scheint nicht in der Mitte zu sein)

Der Effekt der Uhr erfolgt über Nur eine Keyframe-Animation Ja, das heißt um 360° drehen, ändern Sie einfach die Animationsbewegungszeit der beiden Zeiger.

@keyframes clock {  100%{
        transform: rotateZ(360deg);
      }}

In dieser Animationsserie werden einige Pauseneffekte durch Keyframe-Steuerung von einem bestimmten Prozentsatz bis zu einem bestimmten Prozentsatz beibehalten. Der Zustand wird erreicht; einige werden durch die Leichtigkeit der Bewegungskurve erreicht.

Fertig mit Blumen~Wochenende verbringen~

Das obige ist der detaillierte Inhalt vonEine Vielzahl von Ladeanimationen zum Teilen. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!