Heim > Web-Frontend > CSS-Tutorial > Beispiel für die Verwendung von React und CSS3 zur Realisierung des Animationseffekts beim Öffnen roter Umschläge auf WeChat (Code)

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

高洛峰
Freigeben: 2018-05-18 17:15:40
Original
3726 Leute haben es durchsucht

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);
}
Nach dem Login kopieren
<p class=&#39;redpack&#39;>
  <!--  红包的顶部盖子 -->
  <p class="topcontent"></p>
  <!-- 拆红包的按钮 -->
  <p id="redpack-open"></p>
</p>
Nach dem Login kopieren

Die Der Effekt ist wie folgt:

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

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!

Verwandte Etiketten:
Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage