HTML+CSSを使ったクールなログイン切り替え実装プロジェクトの実践

<div class="コンテナ">
    <!-- 登録 -->
    <div class="コンテナ-フォーム コンテナ-サインアップ">
        <form action="#" class="form" id="form1">
            <h2 class="form-title">アカウントを登録する</h2>
            <input type="text" placeholder="ユーザー" class="input" />
            <input type="email" placeholder="Email" class="input" />
            <input type="password" placeholder="パスワード" class="input" />
            <button type="button" class="btn">クリックして登録</button>
        </form>
    </div>
    <!-- ログイン -->
    <div class="コンテナ-フォーム コンテナ-サインイン">
        <form action="#" class="form" id="form2">
            <h2 class="form-title">ログインへようこそ</h2>
            <input type="email" placeholder="Email" class="input" />
            <input type="password" placeholder="パスワード" class="input" />
            <a href="#" class="link">パスワードをお忘れですか?</a>
            <button type="button" class="btn">ログイン</button>
        </form>
    </div>
    <!--オーバーレイ部分-->
    <div class="コンテナオーバーレイ">
        <div class="オーバーレイ">
            <div class="オーバーレイパネルオーバーレイ左">
                <button class="btn" id="signIn">
                    すでにアカウントをお持ちですか? 直接ログインします</button>
            </div>
            <div class="overlay-panel overlay-right">
                <button class="btn" id="signUp">
                    アカウントをお持ちでない場合は、「登録」</button> をクリックしてください。
            </div>
        </div>
    </div>
</div>

体 {
    高さ: 100vh;
    背景: #e7e7e7 url("./img/background.jpg") 中央のリピートなしが修正されました。
    背景サイズ: カバー;
    背景フィルター: ぼかし(5px);
    ディスプレイ: フレックス;
    コンテンツの位置揃え: 中央;
    整列項目: 中央;
}
/* ボディ div スタイル*/
。容器 {
    背景色: #e7e7e7;
    境界半径: 0.7rem;
    ボックスシャドウ: 0 0.9rem 1.7rem rgba(0, 0, 0, 0.25),
        0 0.7rem 0.7rem rgba(0, 0, 0, 0.22);
    高さ: 420ピクセル;
    最大幅: 750ピクセル;
    オーバーフロー: 非表示;
    位置: 相対的;
    幅: 100%;
}
/* ログインおよび登録ボックス部分*/
.container-form {
    高さ: 100%;
    位置: 絶対;
    トップ: 0;
    トランジション: すべて 0.6 秒のイーズインアウト。
}
/* ログイン ボックス - デフォルト レベルは高です*/
.container-signin {
    左: 0;
    幅: 50%;
    z インデックス: 2;
}
/* 登録ボックス - デフォルトのレベルは低い - 透明度 0 */
.container-signup {
    左: 0;
    不透明度: 0;
    幅: 50%;
    z インデックス: 1;
}
/* フォームのスタイル*/
。形状 {
    背景色: #e7e7e7;
    ディスプレイ: フレックス;
    整列項目: 中央;
    コンテンツの位置揃え: 中央;
    フレックス方向: 列;
    パディング: 0 3rem;
    高さ: 100%;
    テキスト整列: 中央;
}
.form-title {
    フォントの太さ: 300;
    マージン: 0;
    マージン-ボトム: 1.25rem;
}
。リンク {
    カラー: #333;
    フォントサイズ: 0.9rem;
    マージン: 1.5rem 0;
    テキスト装飾: なし。
}
.input {
    幅: 100%;
    背景色: #fff;
    パディング: 0.9rem 0.9rem;
    マージン: 0.5rem 0;
    境界線: なし。
    概要: なし。
}
.btn {
    背景色: #f25d8e;
    ボックスシャドウ: 0 4px 4px rgba(255, 112, 159, .3);
    境界半径: 5px;
    色: #e7e7e7;
    境界線: なし。
    カーソル: ポインタ;
    フォントサイズ: 0.8rem;
    フォントの太さ: 太字;
    文字間隔: 0.1rem;
    パディング: 0.9rem 4rem;
    テキスト変換: 大文字;
    トランジション: トランスフォーム 80ms イーズイン。
}
.form>.btn {
    マージントップ: 1.5rem;
}
.btn:アクティブ {
    変換: スケール(0.95);
}
/* ---------- オーバーレイパーツのスタイル--------------- */
.container-overlay {
    高さ: 100%;
    左: 50%。
    オーバーフロー: 非表示;
    位置: 絶対;
    トップ: 0;
    トランジション: トランスフォーム 0.6 秒イーズインアウト;
    幅: 50%;
    z インデックス: 100;
}
。かぶせる {
    幅: 200%;
    高さ: 100%;
    位置: 相対的;
    左: -100%。
    背景: url("./img/background.jpg") リピートなしの中心が修正されました。
    背景サイズ: カバー;
    トランジション: トランスフォーム 0.6 秒イーズインアウト;
    変換:translateX(0);
}
.overlay-panel {
    高さ: 100%;
    幅: 50%;
    位置: 絶対;
    トップ: 0;
    ディスプレイ: フレックス;
    コンテンツの位置揃え: 中央;
    整列項目: 中央;
    フレックス方向: 列;
    変換:translateX(0);
    トランジション: トランスフォーム 0.6 秒イーズインアウト;
}
.overlay-left {
    変換: 変換X(-20%);
}
.overlay-right {
    右: 0;
    変換:translateX(0);
}
/* デザインがアクティブ化されたときのオーバーレイの位置*/
.panel-active .overlay-left {
    変換:translateX(0);
}
.panel-active .container-overlay {
    変換: 変換X(-100%);
}
.panel-active .overlay {
    変換:translateX(50%);
}
/*アクティブ化時のログイン登録レイヤーの場所と透明度を設定します*/
.panel-active .container-signin {
    変換:translateX(100%);
}
.panel-active .container-signup {
    不透明度: 1;
    z インデックス: 5;
    変換:translateX(100%);
}

体 {
  height: 100vh; /* ページの高さをビューポートの高さとして定義します*/
  背景: #e7e7e7 url("./img/background.jpg") center no-repeat fixed; /* ページの背景をグレーとして定義し、背景画像を追加します*/
  background-size: cover; /* ページ全体をカバーする背景画像のサイズを定義します*/
  backdrop-filter: Blur(5px); /* 背景のぼかし効果を定義します*/
  display: flex; /* ページをフレキシブル ボックスとして定義します*/
  justify-content: center; /* 主軸の配置を中央に定義します */
  align-items: center; /* 軸間の配置を中央揃えとして定義します */
}

 .container-form {
  height: 100% /* コンテナの高さを 100% に定義します */
  位置: 絶対位置; /* 絶対的に配置されるコンテナを定義します*/
  top: 0; /* コンテナの上部から 0 までの距離を定義します */
  トランジション: すべて 0.6 秒イーズインアウト; /* トランジション効果を定義します*/
}
.container-signin {
  left: 0; /* ログインボックスを左から0になるように定義します */
  width: 50%; /* ログイン ボックスの幅を 50% に定義します */
  z-index: 2; /* ログインボックスのレベルを 2 に定義します */
}
.container-signup {
  left: 0; /* 左への登録ボックスの距離を 0 として定義します */
  opacity: 0; /* 登録ボックスの透明度を 0 に定義します */
  width: 50% /* 登録ボックスの幅を 50% として定義します */
  z-index: 1; /* 登録ボックスのレベルを 1 として定義します */
}

 。形状 {
  background-color: #e7e7e7; /* フォームの背景をグレーとして定義します*/
  display: flex; /* フォームをフレキシブルボックスとして定義します*/
  align-items: center; /* 軸間の配置を中央揃えとして定義します */
  justify-content: center; /* 主軸の配置を中央に定義します */
  flex-direction: column; /* 主軸方向を垂直方向として定義します*/
  padding: 0 3rem /* フォームの内側の余白を左右 3rem に定義します */
  height: 100%; /* フォームの高さを 100% に定義します */
  text-align: center; /* フォームのテキストの配置を中央に定義します*/
}
.form-title {
  font-weight: 300; /* タイトルのフォントの太さを 300 に定義します */
  margin: 0; /* タイトルのマージンを 0 に定義します */
  margin-bottom: 1.25rem /* タイトルの下マージンを 1.25rem に定義します */ }
  .link { color: #333; /* リンクの色を黒に定義します/ font-size: 0.9rem; / リンクのフォント サイズを 0.9rem に定義します / margin: 1.5rem 0 / リンクのマージンを 1.5 に定義しますrem 上下左右 各 0 / text-decoration: none / 下線を削除するリンクを定義します*/ }
  .input { width: 100%; /* 入力ボックスの幅を 100% として定義します / background-color: #fff; / 入力ボックスの背景を白として定義します / padding: 0.9rem 0.9rem; / 入力ボックスの内側の余白を次のように定義します上下 0.9rem、左右 0.9rem / margin: 0.5rem 0 / 入力ボックスの外側の余白を上下 0.5rem、左右 0 として定義します。 / border: none; / 入力ボックスを境界線なしで定義します / アウトライン: none / 入力ボックスを輪郭なしで定義します*/ }
  .btn { background-color: #f25d8e; /* ボタンの背景をピンクに定義します/ box-shadow: 0 4px 4px rgba(255, 112, 159,.3) / ボタンの影の効果を定義します/ border-radius: 5px; / ボタンの角の半径を 5px に定義します / color: #e7e7e7; / ボタンのテキストの色を白に定義します / border: none;ボタンをボーダーレスに定義します/ カーソル: ポインタ; / ボタンをポインタ型に定義します / font-size: 0.8rem; / ボタンのフォント サイズを 0.8rem に定義します / font-weight: ボールド;太字にするウェイト / 文字間隔: 0.1rem; / ボタンの文字間隔を 0.1rem に定義します / パディング: 0.9rem 4rem;ボタンの内側のマージンを上下に 0.9rem、左右に 4rem に定義します。 / text-transform: uppercase / ボタンのテキストを大文字として定義します。 /transition:transform 80ms easy-in;ボタンのトランジション効果*/ }
  .form>.btn { margin-top: 1.5rem; /* ボタンの上マージンを 1.5rem に定義します */ }
  .btn:active {transform:scale(0.95) /* ボタンがアクティブになったときのスケーリング効果を定義します*/}

 .container-overlay {
    高さ: 100%;
    /* コンテナの高さを 100% に定義 / left: 50% / コンテナの左への距離を 50% に定義 / overflow: hidden / コンテナのオーバーフロー部分を非表示に定義 / 位置; : 絶対; / 絶対配置されるコンテナを定義します / トップ: 0; コンテナの上部から 0 までの距離を定義します / トランジション: 0.6 秒のイーズインアウトを定義します / 幅: 50% ; / コンテナの幅を 50% に定義します / z-index: 100;コンテナレベルを 100 として定義します */
}
。かぶせる {
    幅: 200%;
    /* オーバーレイの幅を 200% として定義 / 高さ: 100%; / オーバーレイの高さを 100% として定義 / 相対位置としてオーバーレイを定義 / left: -100% / 左へのオーバーレイの距離を定義as -100% / 背景: url("./img/background.jpg") no-repeat center fix; / オーバーレイの背景を背景画像として定義し、中央に配置します。 / background-size: cover;ページ全体をカバーするオーバーレイの背景のサイズを定義します/transition:transform 0.6s easy-in-out; /transition:translateX(0)/オーバーレイの初期位置を 0 として定義します。
}
.overlay-panel {
    高さ: 100%;
    /* オーバーレイ パネルの高さを 100% に定義します / width: 50%; / オーバーレイ パネルの幅を 50% に定義します / location:Absolute / オーバーレイ パネルを絶対位置に定義します / top: 0; / オーバーレイ パネルの上部からの距離を 0 と定義します / display: flex / オーバーレイ パネルをフレキシブル ボックスとして定義します / justify-content: center; / 主軸の配置を center として定義します / align-items: center;交差軸の配置を中心として定義します/ flex-direction: column; / 主軸の方向を垂直方向として定義します /transform:translateX(0); / オーバーレイ パネルの初期位置を 0 として定義します /transition:transform 0.6s easy-in-out;トランジションエフェクト*/
}
.overlay-left {
    変換: 変換X(-20%);
    /* 左オーバーレイ パネルの位置を左に 20% 移動するように定義します */
}
.overlay-right {
    右: 0;
    /* 右オーバーレイ パネルの右への距離を 0 として定義します /transform:translateX(0) / 右オーバーレイ パネルの位置を 0 として定義します */
}
/* デザインがアクティブ化されたときのオーバーレイの位置/ .panel-active.overlay-left {transform: translationX(0) / 左側のオーバーレイ パネルの位置を 0 として定義します */
}
.panel-active.container-overlay {
    変換: 変換X(-100%);
    /* 左へのコンテナの距離を -100% として定義します */
}
.panel-active.overlay {
    変換:translateX(50%);
    /* オーバーレイ位置を右に 50% 移動するように定義します */
}
/* アクティブ化時のログイン登録レイヤーの位置と透明度を設定します/ .panel-active.container-signin {transform:translateX(100%) / ログインレイヤーの位置を右に 100% 移動するように定義します */
}
.panel-active.container-signup {
    不透明度: 1;
    /* 登録レイヤーの透明度を 1 として定義します / z-index: 5; / 登録レイヤーのレベルを 5 として定義します /transform:translateX(100%) / 登録レイヤーの位置を 100% 右に移動するように定義します */
}