Erstellen Sie eine schöne, umklappbare Anmelde- und Registrierungsoberfläche auf HTML+CSS-Basis

<Text>
  <div Klasse="Hauptteil Mitte">
    <form class="form-box front">
      <div>
        <h1>Anmelden</h1>
      </div>
      <div>
        <input class="input-normal" type="text" placeholder="Benutzerkonto" />
        <input class="input-normal" type="password" placeholder="Passwort" />
        <button Klasse="btn-submit" Typ="submit">
          LOGIN
        </button>
      </div>
      <div>
        <p style="margin-top: 40px">Wenn Sie kein Konto haben. Bitte</p>
        <p>Klicken Sie hier, um sich <a id="signin">anzumelden</a></p>
      </div>
    </form>
    <!-- Ja, Sie haben richtig gelesen, es gibt grundsätzlich keinen Unterschied zwischen der oberen und unteren Form, eine ist vorne und eine ist hinten -->
    <form class="form-box zurück">
      <div>
        <h1>Registrieren</h1>
      </div>
      <div>
        <input class="input-normal" type="text" placeholder="Benutzerkonto" />
        <input class="input-normal" type="password" placeholder="Passwort" />
        <button Klasse="btn-submit" Typ="submit">
          Registrieren
        </button>
      </div>
      <div>
        <p style="margin-top: 40px">Haben Sie ein Konto? Sie können</p>
        <p>Klicken Sie hier, um sich <a id="login">anzumelden</a></p>
      </div>
    </form>
  </div>
</body>

Körper {
  /*Farbe hängt von persönlichen Vorlieben ab*/
  Hintergrund: dunkelschiefergrau;
  /*Die Schriftart hängt von den persönlichen Vorlieben ab*/
  Schriftfamilie: serifenlos;
}

/*Legen Sie hauptsächlich die Größe der mittleren Form fest. Passen Sie sie einfach so an, wie es Ihrer Meinung nach gut aussieht*/
.Hauptteil {
  Höhe: 440px;
  Breite: 400px;
}

/*Zentrierungseffekt*/
.Mitte {
  /*Stellen Sie sicher, dass die obere linke Ecke der Mitte des übergeordneten Elements entspricht*/
  oben: 50 %;
  links: 50%;
  Position: absolut;
  /*50 % nach links und oben verschieben*/
  transformieren: übersetzen(-50 %, -50 %);
}

.form-box {
  Breite: 100 %;
  Höhe: 100%;
  Rand: automatisch;
  Hintergrund: Dunkelcyan;
  /* Ich finde die Größe dieser abgerundeten Ecke ist genau richtig*/
  Rahmenradius: 40px;
}

.input-normal {
  Breite: 220px;
  Höhe: 38px;
  Rand: 30px automatisch;
  Polsterung: 0;
  Textausrichtung: zentriert;
  Rahmenradius: 20px;
  Gliederung: keine;
  Anzeige: Block;
  Übergang: 0,3 s;
  Rand: 1px durchgezogen #e6e6e6;
}

.btn-einreichen {
  Breite: 100px;
  Höhe: 36px;
  Rand: automatisch;
  Schriftgröße: 18px;
  Textausrichtung: zentriert;
  Farbe: weiß;
  Rahmenradius: 20px;
  Anzeige: Block;
  Hintergrund: dunkelschiefergrau;
  Übergang: 0,3 s;
}

.vorne {
  transformieren: drehenY(0Grad);
}

/* Drehe die Rückseite um 180 Grad, so dass sie dem Benutzer zugewandt ist. Ich wähle hier die Y-Achse*/
.zurück {
  transformieren: Y-Drehung (-180 Grad);
}

.Front,
.zurück {
  Position: absolut;
  /* Stellen Sie es dann so ein, dass es unsichtbar ist, wenn die Rückseite dem Benutzer zugewandt ist */
  Rückseitensichtbarkeit: versteckt;
  /* Ich denke, linear ist sanfter*/
  Übergang: 0,3 s linear;
}

/* Vorderseite um 180 Grad drehen */
.Mitte-Flip .Front {
  transformieren: Y-Drehung (180 Grad);
}
/* 180 Grad zurückdrehen */
.mittlerer-Umdrehung .zurück {
  transformieren: drehenY(0Grad);
}

/* Ich habe es ein wenig angepasst und es sieht für mich gut aus. Sie können es in etwas Besseres ändern*/
P {
  Rand: 15px automatisch;
  Polsterung: 0;
  Schriftgröße: 16px;
  Farbe: weiß;
  Anzeige: Block;
  Textausrichtung: zentriert;
}
A {
  Farbe: Aqua;
  Cursor: Zeiger;
}
js

// Klicken Sie auf „Sigup“, um den Flip-Stil auszulösen $("#sigup").click(function() {
  $(".middle").toggleClass("mittlerer Umschlag");
});
// Klicken Sie auf „Anmelden“, um den Flip-Stil auszulösen $("#login").click(function() {
  $(".middle").toggleClass("mittlerer Umschlag");
});