zdpcss_transparent_animation_login:使用纯HTML+CSS+JS开发支持设置主题和带动画的科技风登录界面

废话不多说,先上图,有图有真相:
在这里插入图片描述

在左下角有一排颜色,点击可以设置主题色:
在这里插入图片描述

比如,我这里点击了橙色,登录界面就变成了如下样子:
在这里插入图片描述

另外,在输入账号和密码的时候,会有一个轻微的抖动动画效果,告诉用户当前正在输入的是什么。

还是老样子,先看看HTML是什么:

<section class="container"><div class="login-container"><!--背景圆1--><div class="circle circle-one"></div><!--登录表单开始--><div class="form-container"><img src="illustration.png"alt="illustration" class="illustration"/><h1 class="opacity">用户登录</h1><form><input name="username" type="text" placeholder="请输入您的账号"/><input name="password" type="password" placeholder="请输入您的密码"/><button class="opacity">登录</button></form><div class="register-forget opacity"><a href="">忘记密码?</a><a href="">注册</a></div></div><!--登录表单结束--><!--背景圆2--><div class="circle circle-two"></div></div><!--左下角有一个可以设置主体的样式区域--><div class="theme-btn-container"></div>
</section>

接着,先看看背景样式是怎么实现的:

/*背景样式开始*/
.circle {width: 8rem;height: 8rem;background: var(--primary-color);border-radius: 50%;-webkit-border-radius: 50%;-moz-border-radius: 50%;-ms-border-radius: 50%;-o-border-radius: 50%;position: absolute;
}.illustration {position: absolute;top: -14%;right: -2px;width: 90%;
}.circle-one {top: 0;left: 0;z-index: -1;transform: translate(-45%, -45%);-webkit-transform: translate(-45%, -45%);-moz-transform: translate(-45%, -45%);-ms-transform: translate(-45%, -45%);-o-transform: translate(-45%, -45%);
}.circle-two {bottom: 0;right: 0;z-index: -1;transform: translate(45%, 45%);-webkit-transform: translate(45%, 45%);-moz-transform: translate(45%, 45%);-ms-transform: translate(45%, 45%);-o-transform: translate(45%, 45%);
}/*背景样式结束*/

再看看登录表单样式是怎么实现的:

/*登录表单样式开始*/
.login-container {position: relative;width: 22.2rem;
}.form-container {border: 1px solid hsla(0, 0%, 65%, 0.158);box-shadow: 0 0 36px 1px rgba(0, 0, 0, 0.2);border-radius: 10px;backdrop-filter: blur(20px);z-index: 99;padding: 2rem;-webkit-border-radius: 10px;-moz-border-radius: 10px;-ms-border-radius: 10px;-o-border-radius: 10px;
}.login-container form input {display: block;padding: 14.5px;width: 100%;margin: 2rem 0;color: var(--color);outline: none;background-color: #9191911f;border: none;border-radius: 5px;font-weight: 500;letter-spacing: 0.8px;font-size: 15px;backdrop-filter: blur(15px);-webkit-border-radius: 5px;-moz-border-radius: 5px;-ms-border-radius: 5px;-o-border-radius: 5px;
}.login-container form input:focus {box-shadow: 0 0 16px 1px rgba(0, 0, 0, 0.2);animation: wobble 0.3s ease-in;-webkit-animation: wobble 0.3s ease-in;
}.login-container form button {background-color: var(--primary-color);color: var(--color);display: block;padding: 13px;border-radius: 5px;outline: none;font-size: 18px;letter-spacing: 1.5px;font-weight: bold;width: 100%;cursor: pointer;margin-bottom: 2rem;transition: all 0.1s ease-in-out;border: none;-webkit-border-radius: 5px;-moz-border-radius: 5px;-ms-border-radius: 5px;-o-border-radius: 5px;-webkit-transition: all 0.1s ease-in-out;-moz-transition: all 0.1s ease-in-out;-ms-transition: all 0.1s ease-in-out;-o-transition: all 0.1s ease-in-out;
}.login-container form button:hover {box-shadow: 0 0 10px 1px rgba(0, 0, 0, 0.15);transform: scale(1.02);-webkit-transform: scale(1.02);-moz-transform: scale(1.02);-ms-transform: scale(1.02);-o-transform: scale(1.02);
}.register-forget {margin: 1rem 0;display: flex;justify-content: space-between;
}.opacity {opacity: 0.6;
}@keyframes wobble {0% {transform: scale(1.025);-webkit-transform: scale(1.025);-moz-transform: scale(1.025);-ms-transform: scale(1.025);-o-transform: scale(1.025);}25% {transform: scale(1);-webkit-transform: scale(1);-moz-transform: scale(1);-ms-transform: scale(1);-o-transform: scale(1);}75% {transform: scale(1.025);-webkit-transform: scale(1.025);-moz-transform: scale(1.025);-ms-transform: scale(1.025);-o-transform: scale(1.025);}100% {transform: scale(1);-webkit-transform: scale(1);-moz-transform: scale(1);-ms-transform: scale(1);-o-transform: scale(1);}
}/*登录表单样式结束*/

因为这套代码交互比较复杂,这里无法贴上全部代码了。如果有感兴趣的朋友可以私信我获取。如果您觉得这篇文章对您有帮助麻烦打赏一下!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/792811.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

使用 ChatGPT 创建在线课程:一步一步指南与提示模板

原文&#xff1a;Creating Online Courses with ChatGPT 译者&#xff1a;飞龙 协议&#xff1a;CC BY-NC-SA 4.0 谢谢 作为对你支持的感谢&#xff0c;随意定制本书中列出的任何提示&#xff0c;并将其作为你自己的重新销售。是的&#xff0c;对你免费。 它们都结构良好且用…

蓝桥杯—DS1302

目录 1.管脚 2.时序&官方提供的读写函数 3.如何使用读写函数 4.如何在数码管中显示在DS1302中读取出的数据&#xff1f; 1.管脚 2.时序&官方提供的读写函数 /* # DS1302代码片段说明1. 本文件夹中提供的驱动代码供参赛选手完成程序设计参考。2. 参赛选手可以自行…

英语写作中“概念”concept 、notion、idea的用法

一、概念concept、notion 是同义词&#xff0c;一般可以互换&#xff0c;例如&#xff1a; The notion/concept of public keys is introduced in the paper “New Direction of Cryptography” half a century ago. Public keys have been widely accepted as a cryptographi…

韩顺平Java | C23 反射Reflection

需求&#xff1a;通过外部文件配置&#xff0c;在不修改源码情况下控制程序&#xff08;符合设计模式ocp开闭原则&#xff1a;不修改源码的情况下扩容功能&#xff09; ※反射机制 反射机制允许程序在执行期间借助于ReflectioAPI取得任何类的内部信息&#xff08;如成员变量&…

跨境金融区块链服务平台

跨境金融服务是因企业及个人跨境经营、交易、投资、往来等活动而产生的资金使用、调拨、配置等需求&#xff0c;而提供的金融服务。近年来&#xff0c;随着我国经济的快速稳步增长和全球化经济一体化的不断深入发展&#xff0c;跨境金融业务增长迅速&#xff0c;监管也开始转化…

AcWing 731. 毕业旅行问题(每日一题)

原题链接&#xff1a;731. 毕业旅行问题 - AcWing题库 此题难度较大&#xff0c;是2019年字节跳动校招题&#xff0c;里面涉及位运算与状态压缩DP&#xff0c;不会的可以去学习&#xff0c;此题根据个人量力而行。 建议看一下y总的讲解&#xff1a;AcWing 731. 毕业旅行问题&…

初识MySQL(中篇)

使用语言 MySQL 使用工具 Navicat Premium 16 代码能力快速提升小方法&#xff0c;看完代码自己敲一遍&#xff0c;十分有用 目录 1.SQL语言 1.1 SQL语言组成部分 2.MySQL数据类型 2.1 数值类型 2.2 字符串类型 2.3 日期类型 3.创建数据表 3.1 创建数据表方法1 …

【A 类比赛】大学生学科竞赛智慧应用场景题目大全

智能应用的多彩场景&#xff1a;未来生活的无限可能 随着科技的飞速发展&#xff0c;智能应用已经渗透到我们生活的方方面面&#xff0c;它们不仅极大地提高了工作效率&#xff0c;也丰富了我们的生活体验。从家庭到工作场所&#xff0c;从城市到乡村&#xff0c;智能应用正在…

vLLM 部署大模型

1 介绍 vLLM 是来自 UC Berkeley 的 LMSYS 在 LLM 推理方面的最新工作&#xff08;没错就是搞出 Vicuna 的那个 group&#xff09;&#xff0c;最大亮点是采用 Paged Attention 技术&#xff0c;结合 Continuous Batching&#xff0c;极大地优化了 realtime 场景下的 LLM serv…

Mybitis根据Date查询,查询不到数据的一种情况

使用SimpleDateFormat创建Date对象时&#xff0c;调用SimpleDateFormat构造方法时格式要写为“yyyy-MM-dd”&#xff0c;如果写成“yyyy-mm-dd”会查询不到数据

Java基础学习: 格式化之 %d,%2d, %02d

在Java中&#xff0c;%d 是用于格式化整数的格式化符号。下面是对不同使用情况的解释&#xff1a; %d&#xff1a;表示将整数值按照默认格式化方式输出。 int number 5; System.out.printf("%d", number); // 输出&#xff1a;5%2d&#xff1a;表示将整数值按照至…

2024-HW --->SSRF

这不是马上准备就要护网了嘛&#xff0c;如火如荼的报名ing&#xff01;&#xff01;&#xff01;那么小编就来查缺补漏一下以前的web漏洞&#xff0c;也顺便去收录一波poc&#xff01;&#xff01;&#xff01;&#xff01; 今天讲的主人公呢就是SSRF&#xff0c;以前学的时候…

windows server 配置DNS

配置DNS为本机IPV4地址 安装DNS服务器&#xff08;默认即可&#xff09;

Qt学习路线推荐(超硬核)

Qt 是一个跨平台的 C图形用户界面应用程序开发框架&#xff0c;它具有强大的功能和丰富的工具&#xff0c;广泛应用于桌面应用程序、移动应用程序和嵌入式系统等领域。如果你对 Qt 感兴趣并想要学习它&#xff0c;以下是一份推荐的学习路线&#xff1a; 1.基础知识学习&#x…

【C++ STL排序容器】set 集合

文章目录 【 1. 基本原理 】【 2. set 的定义 】2.1 调用默认构造函数&#xff0c;创建空的 set 容器2.2 在创建 set 容器的同时&#xff0c;对其进行初始化2.3 拷贝构造的方式创建2.4 取已有 set 容器中的部分元素&#xff0c;来初始化新 set 容器2.5 修改排序规则的方式创建 …

Kotlin:for循环的几种示例

一、 打印 0 到 2 1.1 方式一&#xff1a;0 until 3 /*** 打印 0 到 2*/ fun print0To2M1(){for (inex in 0 until 3){// 不包含3print("$inex ")} }运行结果 1.2 方式二&#xff1a;inex in 0 …2 /*** 打印 0 到 2*/ fun print0To2M2(){for (inex in 0 ..2){//…

Go语言如何使用命令行程序

命令行程序也叫命令行实用程序或工具&#xff0c;它被设计在终端运行。 在图形用户界面面世前&#xff0c;与计算机交与通常是通过命令行进行的。当前&#xff0c;对程序员和系统管理员来说&#xff0c;命令行程序依然是一种流行而实用的与底层操作系统交互的方式。出于如下原因…

HarmonyOS NEXT应用开发之ForEach:循环渲染

ForEach接口基于数组类型数据来进行循环渲染&#xff0c;需要与容器组件配合使用&#xff0c;且接口返回的组件应当是允许包含在ForEach父容器组件中的子组件。例如&#xff0c;ListItem组件要求ForEach的父容器组件必须为 List组件 。 说明&#xff1a; 从API version 9开始&a…

Rust---复合数据类型之字符串与切片(1)

目录 字符串字符串与切片字符串切片字符串操作追加&#xff08;Push&#xff09;插入 (Insert)替换 (Replace) 字符串 Rust 在语言级别&#xff0c;只有一种字符串类型&#xff1a; str&#xff0c;它通常是以引用类型出现 &str。虽然语言级别只有上述的 str 类型&#xf…

C库函数详解(一)

库函数并不是C语言的一部分。它是由人们根据需要编制并提供用户使用的。每一种C编译系统都提供了一批库函数,不同的编译系统所提供的库函数的数目和函数名以及函数功能是不完全相同的。ANSIC标准提出了一批建议提供的标准库函数。它包括了目前多数C编译系统所提供的库函数,但也…