添加更好的动画效果的登录注册界面-CSDN博客

本文链接：https://blog.csdn.net/m0_64180190/article/details/133015721

这篇博客展示了如何使用CSS和JavaScript创建一个带有动画效果的登录/注册界面。通过CSS实现阴影、圆角、渐变等视觉效果，并利用JavaScript实现按钮点击切换登录和注册表单的功能。此外，还应用了响应式设计，确保在不同设备上都能良好显示。

摘要由CSDN通过智能技术生成

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Login/Register Form</title>
<style>
       @import url('https://fonts.googleapis.com/css2?family=Open+Sans:wght@400;600&display=swap');

       * {
       box-sizing: border-box;
       margin: 0;
       padding: 0;
       font-family: 'Open Sans', sans-serif;
       }

       .container {
       background-color: #fff;
       border-radius: 10px;
       box-shadow: 0 14px 28px rgba(0, 0, 0, 0.25), 0 10px 10px rgba(0, 0, 0, 0.22);
       position: relative;
       overflow: hidden;
       width: 100%;
       max-width: 1000px;
       min-height: 550px;
       }

       .forms-container {
       position: absolute;
       width: 100%;
       height: 100%;
       top: 0;
       left: 0;
       }

       .signin-signup {
       position: absolute;
       top: 50%;
       transform: translate(-50%, -50%);
       left: 75%;
       width: 50%;
       transition: 1s 0.7s ease-in-out;
       display: grid;
       grid-template-columns: 1fr;
       z-index: 5;
       }

       form {
       display: flex;
       align-items: center;
       justify-content: center;
       flex-direction: column;
       padding: 0rem 5rem;
       transition: all 0.2s 0.7s;
       overflow: hidden;
       grid-column: 1 / 2;
       grid-row: 1 / 2;
       }

       form.sign-up-form {
       opacity: 0;
       z-index: 1;
       }

       .title {
       font-size: 2.2rem;
       color: #444;
       margin-bottom: 10px;
       }

       .input-field {
       max-width: 380px;
       width: 100%;
       background-color: #f0f0f0;
       margin: 10px 0;
       height: 55px;
       border-radius: 55px;
       display: grid;
       grid-template-columns: 15% 85%;
       padding: 0 0.4rem;
       position: relative;
       }

       .input-field i {
       text-align: center;
       line-height: 55px;
       color: #acacac;
       transition: 0.5s;
       font-size: 1.1rem;
       }

       .input-field input {
       background: none;
       outline: none;
       border: none;
       line-height: 1;
       font-weight: 600;
       font-size: 1.1rem;
       color: #333;
       }

       .input-field input::placeholder {
       color: #aaa;
       font-weight: 500;
       }

       .social-text {
       padding: 0.7rem 0;
       font-size: 1rem;
       }

       .social-media {
       display: flex;
       justify-content: center;
       }

       .social-icon {
       height: 46px;
       width: 46px;
       display: flex;
       justify-content: center;