doc: 增加动画样式

Author: ArgoZhang

src/BootstrapBlazor.Server/Components/Samples/Tutorials/LoginAndRegister/Template5.razor

@@ -40,7 +40,9 @@
                 }
                 else
                 {
-
+                    <div class="logo-container">
+                        <h1 class="blazor-text">BootstrapBlazor</h1>
+                    </div>
                 }
             </div>
             @if (!isEmailEntered)
@@ -72,8 +74,8 @@
             }
             else
             {
-                <h3>欢迎加入 BootstrapBlazor</h3>
-                <div class="email-display2">@email</div>
+                <div class="email-display2"><span>@email</span></div>
+                <h5 class="text-center mt-3 mb-0">欢迎，您已成功登录</h5>
                 <div class="login-video-wrap">
                     <video class="login-video" autoplay="autoplay" playsinline="playsinline" disablepictureinpicture="">
                         <source src="samples/login5/loading1.mp4" type="video/mp4; codecs=av01.0.05M.08">
@@ -83,15 +85,16 @@
                         <img src="samples/login5/loading.png" alt="" role="presentation">
                     </video>
                 </div>
+                <p class="text-center text-muted" style="font-size: 0.75rem;">此登录高仿微软登录 UI</p>
                 <Button class="button" Color="Color.Primary" OnClick="OnEnterSubmit">进入</Button>
             }
         </div>
     </div>
 </div>
 
 @code {
-    private bool isEmailEntered = true;
-    private bool isAuth = true;
+    private bool isEmailEntered = false;
+    private bool isAuth = false;
     private string email = "[email protected]";
     private string password = "123456";
     private bool showEmailError = false;

src/BootstrapBlazor.Server/Components/Samples/Tutorials/LoginAndRegister/Template5.razor.css

@@ -18,7 +18,7 @@
     background: white;
     padding: 40px;
     border-radius: 10px;
-    box-shadow: 0 4px 20px rgba(0,0,0,0.1);
+    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
     width: auto;
     font-family: "Segoe UI", sans-serif;
     text-align: left;
@@ -102,14 +102,14 @@
     font-size: 14px;
 }
 
-    .links a {
-        color: #0066cc;
-        text-decoration: none;
-    }
+.links a {
+    color: #0066cc;
+    text-decoration: none;
+}
 
-        .links a:hover {
-            text-decoration: underline;
-        }
+.links a:hover {
+    text-decoration: underline;
+}
 
 .small {
     font-size: 12px;
@@ -128,11 +128,17 @@
     text-align: center;
 }
 
-.email-display2:after {
+.email-display2 > span {
+    position: relative;
+    padding: 0.5rem 1rem;
+}
+
+.email-display2 > span:after {
     content: "";
+    position: absolute;
+    inset: 0;
     border: 1px solid var(--bs-border-color);
     border-radius: 20px;
-    padding: .5rem;
 }
 
 .login-video-wrap {