Animationssammlung wird geladen-HTML-Tutorial-php.cn

Animationssammlung wird geladen

零下一度

Freigeben： 2017-07-24 10:12:08

Original

2116 Leute haben es durchsucht

Die vier kleinen Kugeln sind jeweils in vier quadratischen Abschnitten enthalten, die kleinen Kugeln ebenfalls relativ zur quadratischen Positionierung (oben: 0; links: 0), drehen Sie das quadratische Div so, dass sich die Kugeln an den vier Ecken befinden, und verwenden Sie dann die Keyframe-Animation, um die Kugel so zu steuern, dass sie sich zwischen der aktuellen Position und einer Position hin und her bewegt nahe dem Mittelpunkt

{animation: flor_move 1s 0s ease infinite;}
@keyframes flor_move {      50%{
        top: 25px;
        left: 25px;
      }
    }

Nach dem Login kopieren

Es bleibt noch ein Rotationseffekt übrig, der dem übergeordneten Element des quadratischen Div

{animation: flor_rote 2s 0s ease infinite;}@keyframes flor_rote {  25%{
        transform: rotateZ(90deg);
      }  50%{transform: rotateZ(180deg);
      }  75%{transform: rotateZ(270deg);
      }  100%{transform: rotateZ(360deg);
      }}

Nach dem Login kopieren

Dieser Effekt ist nicht schwer zu erzielen. Fixieren Sie einfach die neun kleinen Kugeln und ändern Sie die Transparenz der kleinen Kugeln (jede kleine Kugel muss unterschiedliche Animationszeiten einstellen)

@keyframes mar_ligt {  50%{
        opacity: 0.4;
      }}

Nach dem Login kopieren

Es gibt noch neun kleine Kugeln, allerdings wurde hier die Größe der kleinen Kugeln geändert, um zu verhindern, dass das Layout durch die Größenänderung durcheinander gerät , jede kleine Kugel ist in einem Div mit fester Breite und Höhe enthalten, sodass die kleinen Kugeln im Div immer horizontal ausgerichtet werden können. Auf diese Weise können Sie die Größe des Balls sicher ändern (jeder Ball ist weiterhin auf eine andere Animationszeit eingestellt)

@keyframes mar_ligts {  50%{
        transform: scale(.5);opacity: 0.4;
      }}

Nach dem Login kopieren

Pooleffekt, vier kleine Kugeln sind horizontal und vertikal in der Mitte angeordnet, die beiden kleinen Kugeln in der Mitte bewegen sich nicht und die kleinen Kugeln Bewegen Sie sich links und rechts hin und her zu beiden Seiten (Achten Sie dabei auf den Zeitunterschied zwischen den Übungen).

{animation: poolball_l 1s .5s linear infinite;}   //左边的小球
{animation: poolball_r 1s 0s linear infinite;}    //右边的小球@keyframes poolball_l {  25%{
        transform: translateX(-100%);
      }  50%{transform: translateX(0);
      }}
    @keyframes poolball_r {  25%{
        transform: translateX(100%);
      }  50%{transform: translateX(0);
      }}

Nach dem Login kopieren

Dies kommt sehr häufig vor Der gleiche Effekt: Um Verwirrung im Seitenlayout aufgrund von Änderungen in der Größe des Balls zu vermeiden, fügen Sie außerhalb des Balls eine Ebene mit Div mit fester Breite und Höhe hinzu.

Stellen Sie außerdem die Animationsverzögerung für jeden Ball ein

{animation: size_change 1.2s linear infinite;}@keyframes size_change {  20%{
        width: 0;height: 0;
      }  40%{width: 0;height: 0;
      }  50%{width: 20px;height: 20px;
      }}

Nach dem Login kopieren

Fünf kleine Kugeln, zentrieren Sie sie einfach horizontal, verwenden Sie Ränder, um den Abstand zwischen den Kugeln zu vergrößern, und ändern Sie die Übersetzung, Breite, Höhe und Transparenz der Kugeln durch Keyframe-Animation.

Die anfängliche Breite und Höhe des Balls beträgt 15 Pixel und die Transparenz beträgt 0,6.

{animation: flip_ballP 1.2s ease infinite,flip_ballS 1.2s ease infinite;}@keyframes flip_ballP {  50%{
        transform: translateY(60px);
      }}
    @keyframes flip_ballS {  50%{
        height: 15px;width: 15px;opacity: 0.6;
      }  75%{height: 20px;width: 20px;opacity: 1;
      }}

Nach dem Login kopieren

Das obige ist der detaillierte Inhalt vonAnimationssammlung wird geladen. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!