Html 炫酷登陆窗口

已于 2024-05-31 16:59:08 修改
阅读量754 收藏 9
点赞数 26
文章标签： html 前端
于 2024-05-30 23:11:10 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/lhc1755742062/article/details/139336891
版权

<!DOCTYPE html>

<html lang="en">

<!-- https://codepen.io/danielkvist/pen/LYNVyPL -->

<head>

  <meta charset="UTF-8">

  <meta name="viewport" content="width=device-width, initial-scale=1.0">

  <title>Document</title>

  <style>

    :root {

      /* COLORS */

      --white: #e9e9e9;

      --gray: #333;

      --blue: #0367a6;

      --lightblue: #008997;

      /* RADII */

      --button-radius: 0.7rem;

      /* SIZES */

      --max-width: 758px;

      --max-height: 420px;

      font-size: 16px;

      font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen,

        Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;

    }

    body {

      align-items: center;

      background-color: var(--white);

      background: url("https://res.cloudinary.com/dbhnlktrv/image/upload/v1599997626/background_oeuhe7.jpg");

      /* 决定背景图像的位置是在视口内固定，或者随着包含它的区块滚动。*/

      /* https://developer.mozilla.org/zh-CN/docs/Web/CSS/background-attachment */

      background-attachment: fixed;

      background-position: center;

      background-repeat: no-repeat;

      background-size: cover;

      display: grid;

      height: 100vh;

      place-items: center;

    }

    .form__title {

      font-weight: 300;

      margin: 0;

      margin-bottom: 1.25rem;

    }

    .link {

      color: var(--gray);

      font-size: 0.9rem;

      margin: 1.5rem 0;

      text-decoration: none;

    }

    .container {

      background-color: var(--white);

      border-radius: var(--button-radius);

      box-shadow: 0 0.9rem 1.7rem rgba(0, 0, 0, 0.25),

        0 0.7rem 0.7rem rgba(0, 0, 0, 0.22);

      height: var(--max-height);

      max-width: var(--max-width);

      overflow: hidden;

      position: relative;

      width: 100%;

    }

    .container__form {

      height: 100%;

      position: absolute;

      top: 0;

      transition: all 0.6s ease-in-out;

    }

    .container--signin {

      left: 0;

      width: 50%;

      z-index: 2;

    }

    .container.right-panel-active .container--signin {

      transform: translateX(100%);

    }

    .container--signup {

      left: 0;

      opacity: 0;

      width: 50%;

      z-index: 1;

    }

    .container.right-panel-active .container--signup {

      animation: show 0.6s;

      opacity: 1;

      transform: translateX(100%);

      z-index: 5;

    }

    .container__overlay {

      height: 100%;

      left: 50%;

      overflow: hidden;

      position: absolute;

      top: 0;

      transition: transform 0.6s ease-in-out;

      width: 50%;

      z-index: 100;

    }

    .container.right-panel-active .container__overlay {

      transform: translateX(-100%);

    }

    .overlay {

      background-color: var(--lightblue);

      background: url("https://cdn.pixabay.com/photo/2018/08/14/13/23/ocean-3605547_1280.jpg");

      background-attachment: fixed;

      background-position: center;

      background-repeat: no-repeat;

      background-size: cover;

      height: 100%;

      left: -100%;

      position: relative;

      transform: translateX(0);

      transition: transform 0.6s ease-in-out;

      width: 200%;

    }

    .container.right-panel-active .overlay {

      transform: translateX(50%);

    }

    .overlay__panel {

      align-items: center;

      display: flex;

      flex-direction: column;

      height: 100%;

      justify-content: center;

      position: absolute;

      text-align: center;

      top: 0;

      transform: translateX(0);

      transition: transform 0.6s ease-in-out;

      width: 50%;

    }

    .overlay--left {

      transform: translateX(-20%);

    }

    .container.right-panel-active .overlay--left {

      transform: translateX(0);

    }

    .overlay--right {

      right: 0;

      transform: translateX(0);

    }

    .container.right-panel-active .overlay--right {

      transform: translateX(20%);

    }

    .btn {

      background-color: var(--blue);

      background-image: linear-gradient(90deg, var(--blue) 0%, var(--lightblue) 74%);

      border-radius: 20px;

      border: 1px solid var(--blue);

      color: var(--white);

      cursor: pointer;

      font-size: 0.8rem;

      font-weight: bold;

      letter-spacing: 0.1rem;

      padding: 0.9rem 4rem;

      text-transform: uppercase;

      transition: transform 80ms ease-in;

    }

    .form>.btn {

      margin-top: 1.5rem;

    }

    .btn:active {

      transform: scale(0.95);

    }

    .btn:focus {

      outline: none;

    }

    .form {

      background-color: var(--white);

      display: flex;

      align-items: center;

      justify-content: center;

      flex-direction: column;

      padding: 0 3rem;

      height: 100%;

      text-align: center;

    }

    .input {

      background-color: #fff;

      border: none;

      padding: 0.9rem 0.9rem;

      margin: 0.5rem 0;

      width: 100%;

    }

    @keyframes show {

      0%,

      49.99% {

        opacity: 0;

        z-index: 1;

      }

      50%,

      100% {

        opacity: 1;

        z-index: 5;

      }

    }

</style>

</head>

<body>

  <div class="container right-panel-active">

    <!-- Sign Up -->

    <div class="container__form container--signup">

      <form action="#" class="form" id="form1">

        <h2 class="form__title">Sign Up</h2>

        <input type="text" placeholder="User" class="input" />

        <input type="email" placeholder="Email" class="input" />

        <input type="password" placeholder="Password" class="input" />

        <button class="btn">Sign Up</button>

      </form>

    </div>

    <!-- Sign In -->

    <div class="container__form container--signin">

      <form action="#" class="form" id="form2">

        <h2 class="form__title">Sign In</h2>

        <input type="email" placeholder="Email" class="input" />

        <input type="password" placeholder="Password" class="input" />

        <a href="#" class="link">Forgot your password?</a>

        <button class="btn">Sign In</button>

      </form>

    </div>

    <!-- Overlay -->

    <div class="container__overlay">

      <div class="overlay">

        <div class="overlay__panel overlay--left">

          <button class="btn" id="signIn">Sign In</button>

        </div>

        <div class="overlay__panel overlay--right">

          <button class="btn" id="signUp">Sign Up</button>

        </div>

      </div>

    </div>

  </div>

  <script>

    const signInBtn = document.getElementById("signIn");

    const signUpBtn = document.getElementById("signUp");

    const fistForm = document.getElementById("form1");

    const secondForm = document.getElementById("form2");

    const container = document.querySelector(".container");

    signInBtn.addEventListener("click", () => {

      container.classList.remove("right-panel-active");

    });

    signUpBtn.addEventListener("click", () => {

      container.classList.add("right-panel-active");

    });

    fistForm.addEventListener("submit", (e) => e.preventDefault());

    secondForm.addEventListener("submit", (e) => e.preventDefault());

</script>

</body>

</html>

多次拒绝王祖贤！
关注
HTML、CSS、js幻灯片登录/注册表单
qq_52899829的博客
11-30 544
html代码： <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <link rel="stylesheet" href="css/new_file.css" /> <script src="js/new_file.js"></script> <script src="js/jque
设计用户登录与注册界面切换的HTML+CSS+JS代码
qq_43580271的博客
08-02 804
在现代网页设计中，用户登录和注册界面是与用户进行有效互动的关键元素之一。使用HTML和CSS，我们可以轻松地构建具有良好用户体验的界面。
【前端学习】HTML + CSS 写一个登陆界面
Liaojiajia-Blog
03-03 3908
HTML + CSS 写一个登陆界面1. index.html2. style.css3. iconfont.css4. 界面效果 1. index.html <!-- * @Author: your name * @Date: 2021-03-04 16:27:09 * @LastEditTime: 2021-03-04 16:37:03 * @LastEditors: Please set LastEditors * @Description: In User Settings Edit
分享86个HTML登录框模板，总有一款适合您
最新发布
zy0412326的专栏
09-12 599
扁平彩色用户登录注册响应式网页模板。登录及信息提交表单响应式网页模板。第三方注册登录表单响应式网页模板。登录注册选项卡切换响应式网页模板。橙色学生登录表单响应式网页模板。登录用户导航组件响应式网页模板。电子邮件登录界面响应式网页模板。彩色注册登录表单响应式网页模板。账户登录搜索表单响应式网页模板。紫色选项卡登录注册组件网页模板。登录注册表单介绍响应式网页模板。简洁扁平用户登录响应式网页模板。棕色用户登录组件响应式网页模板。暗红渐变登录表单响应式网页模板。扁平登录注册界面响应式网页模板。
[HTML+CSS+JS] 实现注册登录页面
qq_49900295的博客
03-28 3535
文件夹结构： index.html: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0">.
html+css+js实现登录注册界面.rar
08-08
采用html+css+js技术实现登录注册界面共有六个案例，主要用来做个人博客、管理系统、购物网站的登录界面等等。
HTML炫酷登录模板
06-11
界面非常炫酷，既有动态效果也包含了其所有需要的图片资源
炫酷的web登录页面代码
04-03
这个是一个炫酷的登录页面代码，使用了HTML5+CSS3从而实现的登陆界面窗口，该页面通俗易懂，非常适合初学者进行学习基础布局，
实用代码：HTML+JS+CSS实现的全屏自动切换背景的时尚 登录与注册块翻转切换页面 代码详解
uu0216的博客
07-03 1050
本篇，我介绍一个非常酷而且实用的代码：HTML+JS+CSS实现的全屏自动切换背景的时尚 登录与注册块翻转切换页面。说的有点晕是吧，没关系，看看效果图，你就明白了。动态切换登录和注册这块gif动画截图的效果不太清楚，但基本效果还是能够表达的了。想看清晰美女大图的，可以下载源文件包。
仿windows桌面系统
10-22
这个功能在HTML5环境中可以通过JavaScript和CSS布局技术如Flexbox或Grid来实现，使多个窗口可以平铺在屏幕上。 这个项目不仅展示了HTML5在构建复杂交互界面方面的潜力，还体现了前端开发者对用户体验的重视。通过...
计算机毕业设计：基于HTML学校后台用户登录界面模板源码
html精品源码
08-05 1035
🏫 校园网页设计 、学校班级网页制作、学校官网、小说书籍、等网站的设计与制作。🏷️HTML静态网页设计作业使用dreamweaver制作，采用DIV+CSS布局，共有多个页面，首页使用CSS排版比较丰富，色彩鲜明有活力。顶部导航及底部区域背景色为100%宽度，主体内容区域宽度🏅 一套优质的💯网页设计应该包含 (具体可根据个人要求而定)📔网站布局方面：计划采用目前主流的、能兼容各大主流浏览器、显示效果稳定的浮动网页布局结构。📓网站程序方面：计划采用最新的网页编程语言HTML5+CSS3+JS程序语......
基于HTML5+css+JS_的精美登陆注册界面
08-13
基于HTML5+css+JS的精美登陆注册界面-------------------------------
炫酷登录页面
02-08
非常炫酷的登录页面 可以下载看一下123456789789789789
炫酷的登录页面 —— html
03-25
JS 编写的炫酷效果
jquery 炫酷登录页面
11-12
在jquery炫酷登录页面的基础上进行改版，实现鼠标点击页面效果
炫酷的动态登录页面
03-12
一个炫酷的动态登录页面，里面包含javascript,css,jquery技术。
html好看的登录界面2（十四种风格登录源码）_html登录页面(1)
2301_82243626的博客
04-28 4125
为了帮助大家更好的了解前端，特别整理了《前端工程师面试手册》电子稿文件。开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】
html+css+javaScript实现一个简单的注册界面
小小城序员的博客
08-07 9361
html+css+js实现一个简单的注册界面 自学html，css，js也有一小段时间了，尝试着做点东西来巩固一下，就决定实现这个简单的注册界面。实现的注册界面很普通，没有加上华丽的装饰，但能实现基本的注册界面应有的效果。 注册界面的效果： 1.未输入或输入框为空时会有默认值提示输入信息 2.输入框获取焦点时时会清空默认值 3.输入不符合要求时会有警告提示 4.全部信息未输入正确时无法注册提交 5.地址选择时，选择省份后会有该省份相应的市提供选择 注册界面： 附上代码：（代码里有详细的注释） logini
vue3炫酷登陆界面
08-25
为了实现Vue3炫酷登陆界面，你可以按照以下步骤进行准备和操作： 1. 首先，你需要导入element-plus和particles.vue3这两个包。你可以使用以下命令来导入它们： ```shell # 使用yarn yarn add element-plus particles.vue3 # 使用npm npm install element-plus particles.vue3 --save ``` 2. 导入所需的组件和样式。在你的Vue3项目中，你可以在需要使用的组件中导入element-plus和particles.vue3，并按需加载所需的样式。确保你已经正确配置了vite.config.ts文件，以确保按需加载生效。 3. 在Vue3组件中使用element-plus和particles.vue3。你可以使用element-plus提供的各种组件来构建炫酷的登陆界面，比如按钮、表单、输入框等。同时，你可以使用particles.vue3来添加粒子效果，使登陆界面更加动态和吸引人。 4. 根据你的设计和需求，使用Vue3的模板语法和组件功能构建炫酷的登陆界面。你可以使用element-plus提供的组件来构建表单，处理用户的输入和验证。同时，你可以使用particles.vue3来添加背景粒子效果，提升界面的视觉效果。 记住，在使用element-plus和particles.vue3之前，确保你已经正确导入了这两个包，并按照需要在组件中使用它们。同时，根据你的项目配置和需求，可能需要进行一些额外的配置。 希望这些步骤可以帮助你实现一个炫酷的Vue3登陆界面！<span class="em">1</span><span class="em">2</span><span class="em">3</span> #### 引用[.reference_title] - *1* *2* *3* [使用vue3+element-plus+particles实现炫酷(粒子背景)登陆界面](https://blog.csdn.net/m0_61470934/article/details/130240904)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 100%"] [ .reference_list ]
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值