CSS3 realisiert den roten Umschlag-Shaking-Effekt

Es besteht die Anforderung, den Schütteleffekt der roten Umschläge zu realisieren. Ich habe das noch nie gemacht. Ich werde es aufzeichnen. Hehe~~
Hier wird die Eigenschaft transform: rotate() verwendet und eine Animation hinzugefügt, um den Animationseffekt zu erzielen. Auf den Code gehe ich nicht näher ein.

.red_packet {
  Breite: 180rpx;
  Höhe: 220rpx;
  Position: fest;
  oben: 10rpx;
  rechts: 20rpx;
  Farbe: #D60E19;
  Animation: Schütteln, 0,5 s, linear, unendlich;
}
@keyframes schütteln {

  25 % {
    transformieren: drehen (7 Grad);
  }
  75 % {
    transformieren: drehen (-7 Grad);
  }

  50 %,
  100 % {
    transformieren: drehen(0);
  }
}

Der Effekt, der zunächst erzielt wurde, war wie folgt

Es schwingt ständig nach links und rechts, aber der gewünschte Effekt ist, alle paar Sekunden zweimal zu wackeln. Was soll ich tun, wenn die Animation keine Intervallanimation unterstützt? Nach einer Suche auf Baidu habe ich festgestellt, dass sich durch die Einstellung des Prozentsatzes die ersten drei Sekunden nicht bewegen und das Schütteln bei 70 % beginnt. Es muss schnell, präzise und rücksichtslos sein. Nach einigen Verbesserungen ist der Effekt wie folgt:

.red_packet {
  Breite: 180rpx;
  Höhe: 220rpx;
  Position: fest;
  oben: 10rpx;
  rechts: 20rpx;
  Farbe: #D60E19;
  Animation: 3 s linear unendlich schütteln;
}

@keyframes schütteln {

  70 %, 80 % {
    transformieren: drehen (7 Grad);
  }
  75 % {
    transformieren: drehen (-7 Grad);
  }

  65 %,
  85 % {
    transformieren: drehen(0);
  }
}

Dies ist das Ende dieses Artikels darüber, wie man mit CSS3 einen Red-Envelope-Shaking-Effekt erzielt. Weitere relevante CSS3-Inhalte zum Red-Envelope-Shaking finden Sie in früheren Artikeln auf 123WORDPRESS.COM oder in den verwandten Artikeln weiter unten. Ich hoffe, Sie werden 123WORDPRESS.COM auch in Zukunft unterstützen!