Beispiel für die Verwendung von React und CSS3 zur Realisierung des Animationseffekts beim Öffnen roter Umschläge auf WeChat (Code)

Dieser Artikel stellt hauptsächlich die Verwendung von React plus CSS3 vor, um ein Beispiel (Code) zum Öffnen roter Umschläge zu realisieren, auf das sich interessierte Freunde beziehen können einmal.

Rote Umschläge von WeChat haben eine Reihe von Marketing-Wahnsinn ausgelöst. Ich glaube, dass jeder mit dieser Form roter Umschläge vertraut ist. Zunächst verwenden wir React, um den Animationseffekt des Öffnens von Rot umzusetzen Umschläge für alle zum Austauschen und Lernen

Verwenden Sie CSS3, um rote Umschläge zu zeichnen

.redpack {
  height: 450px;
  background: #A5423A;
  width: 300px;
  left: 0;
  top: 0;
  border-radius: 10px;
  margin: 0 auto;
}
.topcontent {
    height: 300px;
    border: 1px solid #BD503A;
    background-color: #BD503A;
    border-radius: 10px 10px 50% 50% / 10px 10px 15% 15%;
    box-shadow: 0px 4px 0px -1px rgba(0,0,0,0.2);
}
#redpack-open {
    width: 100px;
    height: 100px;
    border: 1px solid #FFA73A;
    background-color: #FFA73A;
    border-radius: 50%;
    color: #fff;
    font-size: 20px;
    display: inline-block;
    margin-top: -50px;
    box-shadow: 0px 4px 0px 0px rgba(0, 0, 0, 0.2);
}

<p class=&#39;redpack&#39;>
  <!--  红包的顶部盖子 -->
  <p class="topcontent"></p>
  <!-- 拆红包的按钮 -->
  <p id="redpack-open"></p>
</p>

Die Der Effekt ist wie folgt:

Verwenden Sie React, um verschiedene Zustandsübergänge zu unterscheiden

Verwenden Sie React.

Bei Implementierung mit js wird hauptsächlich gesteuert, ob der rote Umschlag auf das Öffnen wartet oder geöffnet wurde, indem der Status beurteilt wird. Der spezifische Code lautet wie folgt

Das obige ist der detaillierte Inhalt vonBeispiel für die Verwendung von React und CSS3 zur Realisierung des Animationseffekts beim Öffnen roter Umschläge auf WeChat (Code). Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!