HTML CSS 魔法秀：打造翻转卡片登录注册页面
这段 HTML 和 CSS 代码创建了一个具有翻转卡片效果的登录和注册页面。下面是对重点标签和 CSS 样式的解释和总结：
一键复制
<!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"><title>前端Hardy</title><style>@import url('https://fonts.googleapis.com/css?family=Montserrat:400,700|Roboto|Raleway:700');:root {--default-font: 'Roboto';}html,body {margin: 0;padding: 0;}body {font-family: var(--default-font);background: #444;}header {width: 100vw;height: 5vh;}.box {display: flex;align-items: center;justify-content: center;height: 100vh;}a {text-decoration: none;color: #222;transition: color 200ms ease-out;}.container {width: 640px;height: 480px;margin: auto;display: flex;}.panel,.face,form {display: flex;flex-direction: column;justify-content: center;align-items: center;}.face,.panel {height: 100%;width: 100%;border-radius: 8px;}.card {position: relative;width: 50%;height: 100%;transition: transform 500ms ease-in-out;transform-style: preserve-3d;}.card.flip {transform: rotateY(180deg);}.face {position: absolute;background: #EEE;text-align: center;backface-visibility: hidden;}.card-back {transform: rotatey(180deg);}.panel {color: whitesmoke;background: #222;letter-spacing: 0.03em;}.panelspan {margin: 5px 25px;font-size: 15px;}.panelbtn {margin-top: 20px;background: #222;border: 1px solid whitesmoke;}.formspan {font-size: 14px;margin: 5px;}.forgot {margin: 8px;}.formbtn {color: #222;}#forgotpassword {font-size: 15px;margin: 8px;}input {display: block;margin: 6px;padding: 8px 10px;width: 110%;background: #DDD;border: 1.5px solid #DDD;border-radius: 6px;transition: border 250ms ease-out;}input:hover,input:focus {outline: none;border: 1.5px solid black;}::placeholder {letter-spacing: 0.02em;color: rgba(70, 70, 70, 1);}button {cursor: pointer;width: 140px;padding: 10px;margin: 5px;color: whitesmoke;background: #DDD;border: none;border-radius: 25px;font-family: 'Raleway';letter-spacing: 0.02em;text-transform: uppercase;transition: color 200ms ease-out, background 200ms ease-out;}button:hover,button:focus {outline: none;}button:hover,button:active {background: #222;color: whitesmoke;}h2 {font-family: 'Montserrat';font-weight: bold;font-size: 1.7em;}.social-container {display: flex;flex-direction: row;justify-content: center;align-items: center;}.social-container a {width: 25px;height: 25px;margin: 5px;padding: 10px;color: #222;background: #DDD;border-radius: 25px;display: flex;justify-content: center;align-items: center;transition: border 200ms ease-out, background 200ms ease-out, color 200ms ease-out;}.social-container a:hover {border-color: black;background: #222;color: whitesmoke;}</style>
</head><body><head><meta name="viewport" content="width=device-width, initial-scale=1.0"><link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.1/css/all.css"integrity="sha384-50oBUHEmvpQ+1lW4y57PTFmhCaXp0ML5d60M1M7uH2+nqUivzIebhndOJK28anvf" crossorigin="anonymous"></head><body><section class="box"><div class="container"><div class="card left"><div class="face card-front"><div class="signin-form"><form action="javascript:void(0);"><h2>Sign in</h2><div class="social-container"><a href="javascript:void(0);" class="social" id="fb"><iclass="fab fa-facebook-f"></i></a><a href="javascript:void(0);" class="social" id="gp"><iclass="fab fa-google-plus-g"></i></a><a href="javascript:void(0);" class="social" id="lin"><iclass="fab fa-linkedin-in"></i></a></div><span class="formspan">or use your registered account</span><input type="email" placeholder="Email" /><input type="password" placeholder="Password" /><span class="olspan forgot"><a href="javascript:void(0);">Forgot yourpassword?</a></span><button class="formbtn">Sign in</button></form></div></div><div class="face card-back"><div class="panel"><h2>Welcome back!</h2><span class="panelspan">To keep connected with us please login with your personalinfo</span><button class="panelbtn signInBtn">Sign In</button></div></div></div><div class="card right"><div class="face card-front"><div class="panel"><h2>Hello, Friend!</h2><span class="panelspan">Enter your personal details and start journey with us</span><button class="panelbtn signUpBtn">Sign Up</button></div></div><div class="face card-back"><div class="signup-form"><form action="javascript:void(0);"><h2>Create Account</h2><div class="social-container"><a href="javascript:void(0);" class="social" id="fb"><iclass="fab fa-facebook-f"></i></a><a href="javascript:void(0);" class="social" id="gp"><iclass="fab fa-google-plus-g"></i></a><a href="javascript:void(0);" class="social" id="lin"><iclass="fab fa-linkedin-in"></i></a></div><span class="formspan">or use your email for registration</span><input type="email" placeholder="Email" /><input type="name" placeholder="Username" /><input type="password" placeholder="Password" /><button class="formbtn">Sign up</button></form></div></div></div></div></section><script>var left = document.querySelector('.left');var right = document.querySelector('.right');var signUp = document.querySelector('.signUpBtn');var signIn = document.querySelector('.signInBtn');signUp.addEventListener('click', function () {left.classList.add('flip');right.classList.add('flip');});signIn.addEventListener('click', function () {left.classList.remove('flip');right.classList.remove('flip');});</script></body>
</body>
</html>
- box：作为整个页面的容器，居中显示。
- container：包含两个card元素，分别代表登录和注册的卡片。
- 两个face，分别代表卡片的正面和背面。
- 登录卡片的正面包含一个登录表单，背面包含欢迎信息。
- 注册卡片的正面包含注册信息，背面包含一个注册表单。
- input标签用于输入电子邮件、密码、用户名等。
- button标签用于提交表单和触发翻转效果。
- .card：设置为相对定位，宽度为容器的50%，高度100%。
- .face：绝对定位，覆盖整个卡片，背景色为#EEE。
- .card.flip：使用transform属性实现翻转效果。
- .panel、.face、form：使用Flexbox布局，居中对齐。
- input、button：设置输入框和按钮的样式，包括边框、背景色、圆角等。
- ::placeholder：设置占位符文本的样式。
- .social-container：使用Flexbox布局社交登录按钮。
- .social-container a：设置社交登录按钮的样式，包括颜色、背景、圆角等。
- a、button：设置链接和按钮的悬停和焦点状态的样式变化。
- 使用transition属性为颜色和变换添加过渡效果。
- 通过监听.signUpBtn和.signInBtn按钮的点击事件，实现卡片的翻转效果。
相关文章：
HTML CSS 魔法秀：打造翻转卡片登录注册页面
这段 HTML 和 CSS 代码创建了一个具有翻转卡片效果的登录和注册页面。下面是对重点标签和 CSS 样式的解释和总结： 一键复制 <!DOCTYPE html> <html lang"en"><head><meta charset"UTF-8"><meta http-equiv"…...
Web day04 SpringBoot
目录 1.Spring概念： 2. spring程序快速入门： 3.HTTP协议： 特点： 基于TCP 协议： 基于请求响应模型： HTTP协议是无状态协议： 请求协议：为浏览器向服务器发出的消息 获取请求数据…...
selinux和防火墙实验
1 、 selinux 的说明 SELinux 是 Security-Enhanced Linux 的缩写，意思是安全强化的 linux 。 SELinux 主要由美国国家安全局（ NSA ）开发，当初开发的目的是为了避免资源的误用。 系统资源都是通过程序进行访问的，如…...
ClamAV 在 CentOS 的开发版本 `clamav-devel`
是的，ClamAV 在 CentOS 上有开发版本（通常称为 clamav-devel），它包含了开发 ClamAV 应用程序所需的头文件和库文件。以下是如何在 CentOS 上安装 ClamAV 及其开发版本的步骤。 ### 1. **安装 EPEL 仓库** ClamAV 通常在 EPEL&am…...
C++《二叉搜索树》
在初阶数据结构中我学习了树基础的概念以及了解了顺序结构的二叉树——堆和链式结构二叉树该如何实现，那么接下来我们将进一步的学习二叉树，在此会先后学习到二叉搜索树、AVL树、红黑树；通过这些的学习将让我们更易于理解后面set、map、哈希等…...
⭐️ GitHub Star 数量前十的工作流项目
文章开始前，我们先做个小调查：在日常工作中，你会使用自动化工作流工具吗？🙋 事实上，工作流工具已经变成了提升效率的关键。其实在此之前我们已经写过一篇博客，跟大家分享五个好用的工作流工具。…...
uni-app中的样式尺寸单位，px，rpx，vh，vw
uni-app 支持less、sass、scss、stylus等预处理器。 尺寸单位 uni-app 支持的通用 css 单位包括 px、rpx px 即屏幕像素rpx 即响应式 px，一种根据屏幕宽度自适应的动态单位。以 750 宽的屏幕为基准，**750rpx 恰好为屏幕宽度。**屏幕变宽，r…...
跳表（Skip List）
跳表（Skip List） 跳表是一种用于快速查找、插入和删除的概率型数据结构，通常用于替代平衡二叉搜索树（如 AVL 树或红黑树）。跳表通过在有序链表的基础上增加多层索引，使得查找操作的平均时间复杂度降低&…...
103.【C语言】数据结构之建堆的时间复杂度分析
1.向下调整的时间复杂度 推导 设树高为h 发现如下规律 按最坏的情况考虑(即调整次数最多) 第1层,有个节点,最多向上调整h-1次 第2层,有个节点,最多向上调整h-2次 第3层,有个节点,最多向上调整h-3次 第4层,有个节点,最多向上调整h-4次 ... 第h-1层,有个节点,最多向上调整1次 第…...
数字信号处理实验报告四：IIR数字滤波器设计及软件实现
1．实验目的 （1）熟悉用双线性变换法设计IIR数字滤波器的原理与方法； （2）学会调用MATLAB信号处理工具箱中滤波器设计函数（或滤波器设计分析工具fdatool）设计各种IIR数字滤波器，学会根据滤波需求确定滤波器指标参数。 （3）掌握IIR数字滤波器的MATLAB实现方法。 （3）…...
Flutter：encrypt插件 AES加密处理
1、pubspec.yaml导入插件 cupertino_icons: ^1.0.8 # 密码加密 encrypt: 5.0.3encrypt封装 import package:encrypt/encrypt.dart; /// 加密类 class EncryptUtil {static final EncryptUtil _instance EncryptUtil._internal();factory EncryptUtil() > _instance;Encrypt…...
软银集团孙正义再度加码OpenAI，近屿智能专注AI人才培养
11月28日凌晨，全球最大财经CNBC报道，软银集团创始人兼CEO孙正义再次向人工智能领域的领军企业OpenAI投资了15亿美元。软银对OpenAI的投资已不是首次。就在上个月，软银已在OpenAI的上一轮融资中注入了5亿美元的资金。但他一直寻求获得OpenAI更…...
中安装界面测试ROS)
windows11下的Ubuntu（WSL)中安装界面测试ROS
症状：我在WSL(Ubuntu)中我自己的用户名下面安装好了ROS,输入命令行能用，就是不弹出窗口。 首先到windows应用商店安装Ubuntu,我这里安装的是20.04,然后安装对应的ROS（Noetic版本）. 然后windows安装VcXsrv. Ubuntu安装xfce4。 …...
Stable Diffusion 3详解
🌺系列文章推荐🌺 扩散模型系列文章正在持续的更新，更新节奏如下，先更新SD模型讲解，再更新相关的微调方法文章，敬请期待！！！（本文及其之前的文章均已更新&…...
【CSS】设置文本超出N行省略
文章目录 基本使用 这种方法主要是针对Webkit浏览器，因此可能在一些非Chrome浏览器中不适用。 基本使用 例如：设置文本超出两行显示省略号。 核心代码： .ellipsis-multiline {display: -webkit-box; -webkit-box-orient: vertical; /* 设置…...
Python绘画：蛋糕
Python绘画：蛋糕 🐸 前言 🐸🐋 效果图 🐋🐉 代码 🐉 🌵🌲🌳🌴🌿🍀☘️🌱🍃🎋…...
使用wget在清华镜像站下载Anaconda报错ERROR 403: Forbidden.
问题描述 使用wget在清华镜像站下载Anaconda报错ERROR 403: Forbidden. Resolving mirrors.tuna.tsinghua.edu.cn (mirrors.tuna.tsinghua.edu.cn)… 101.6.15.130, 2402:f000:1:400::2 Connecting to mirrors.tuna.tsinghua.edu.cn (mirrors.tuna.tsinghua.edu.cn)|101.6.15…...
道可云人工智能元宇宙每日资讯｜第三届京西地区发展论坛成功召开
道可云元宇宙每日简报（2024年11月27日）讯，今日元宇宙新鲜事有： 工信部等十二部门印发《5G规模化应用“扬帆”行动升级方案》 11月25日，工业和信息化部等十二部门印发《5G规模化应用“扬帆”行动升级方案》。《方案》…...
web安全之信息收集
在信息收集中，最主要是就是收集服务器的配置信息和网站的敏感信息，其中包括域名及子域名信息，目标网站系统，CMS指纹，目标网站真实IP，开放端口等。换句话说，只要是与目标网站相关的信息，我们都应该去尽量搜集。 1.1收集域名信息 知道目标的域名之后，获取域名的注册信…...
Google Earth Engine APP（GEE） ——基于多种机器学习多源遥感不同变量组合下的森林地表生物量模型预测APP
目录 Arguments: Returns: ui.Select Arguments: Returns: ui.Chart Arguments: Returns: ui.Chart Arguments: Returns: Classifier Arguments: Returns: Classifier Arguments: Returns: Classifier 本代码的主要功能是将我们提前准备好的森林生物量样本点上传到…...
Redis开发02：redis.windows-service.conf 默认配置文件解析与注解
文件位置：redis安装目录下的 redis.windows-service.conf ，存放了redis服务的相关配置，下面列举出默认配置的含义： 配置项含义bind 127.0.0.1限制 Redis 只监听本地回环地址，意味着只能从本地连接 Redis。protected-m…...
webrtc 3A移植以及实时处理
文章目录 前言一、交叉编译1.Pulse Audio webrtc-audio-processing2.交叉编译 二、基于alsa进行实时3A处理1.demo源码2.注意项3.效果展示 总结 前言 由于工作需要，硬件3A中的AEC效果实在太差，后面使用SpeexDSP的软3A，效果依旧不是很好&#…...
Android so库的编译
在没弄明白so库编译的关系前，直接看网上博主的博文，常常会觉得云里雾里的，为什么一会儿通过Android工程cmake编译，一会儿又通过NDK命令去编译。两者编译的so库有什么区别？ android版第三方库编译总体思路： 对于新手小白来说搞明白上面的总体思路图很有必…...
Reachy 2，专为AI与机器人实验室打造的卓越开源双臂移动操作平台！
近期，花粉机器人（POLLEN ROBOTICS）隆重推出Reachy 2仿生机器人——下一代开源操作平台，为AI与机器人实验室带来理想的双臂移动操作科研平台！ Reachy 2的仿生性： 》拥有两个基于Maxon无刷电机的仿生7自由度…...
Jest 测试异步函数
异步编程的发展历史 异步函数,就不用我描述了,JS是单线程的,所以没有办法处理异步问题,但是可以通过其他的机制实现 回调函数 例如,我们写一个定时器,在函数fetchData中,有一个延时处理的函数,但是,你有不能等他,如果他是一年呢? 所以,我们给他一个回调函数,来等他执行完返回处…...
linux安全管理-防火墙配置
1. 开启系统防火墙 1、检查内容 检查操作系统是否开启防火墙； 2、配置要求 操作系统开启防火墙； 3、配置方法 systemctl status firewalld ##查看系统防火墙运行状态 systemctl start firewalld ##启动防火墙 systemctl restart firewalld ##重启防火墙…...
Blender 运行python脚本
Blender 运行python脚本 步骤 1：打开 Blender 首先，打开 Blender 软件。你可以从官方网站 [blender.org]( 下载最新的 Blender 版本，并按照安装向导进行安装。 步骤 2：打开“文本编辑器”面板 在 Blender 的默认布局中ÿ…...
Three.js CSS2D/CSS3D渲染器
在Three.js开发过程中，有时需要将 HTML 元素与 Three.js 渲染的 3D 场景相结合，这就需要用到 CSS2DRenderer 和 CSS3DRenderer。本文将详细介绍这两种渲染器的原理及其应用 一、CSS2DRenderer 渲染器 概述 CSS2DRenderer 渲染器用于在 3D 场景中渲染纯…...
centos7 yum install 失败,mirrorlist.centos.org连接不上
由于centos7停止支持,导致mirrorlist.centos.orgdns解析都是失效啦,yum命令没法安装程序. 换一个镜像源就好 sudo cp /etc/yum.repos.d/CentOS-Base.repo /etc/yum.repos.d/CentOS-Base.repo.bak sudo curl -o /etc/yum.repos.d/CentOS-Base.repo http://mirrors.aliyun.com/…...
BGP协议路由黑洞
一、实验环境 1、分公司与运营商AS自治系统内运行IGP路由协议OSPF、RIP或静态路由，AS自治系统内通过IBGP路由协议建立BGP邻居关系。 2、公司AS自治系统与运营商AS自治系统间运行EBGP路由协议。 3、通过loopback建立IBGP与EBGP邻居关系，发挥loopback建立…...
学习ASP.NET Core的身份认证（基于Session的身份认证1）
ASP.NET Core使用Session也可以实现身份认证，关于Session的介绍请见参考文献5。基于Session的身份认证大致原理就是用户验证成功后将用户信息保存到Session中，然后在其它控制器中从Session中获取用户信息，用户退出时清空Session数据。百度基于…...
《Docker Registry（镜像仓库）详解》
一、引言 在容器化技术日益普及的今天，Docker 已成为众多开发者和企业的首选工具。而 Docker Registry（镜像仓库）作为 Docker 生态系统中的重要组成部分，负责存储和分发 Docker 镜像。本文将深入探讨 Docker Registry 的概念、功能…...
Mybatis
1 什么是MyBatis MyBatis是一个优秀的持久层框架，它对JDBC操作数据库的过程进行封装，使开发者只需要关注 SQL 本身，而不需要花费精力去处理例如注册驱动、创建connection、创建statement、手动设置参数、 结果集检索等JDBC繁杂的过程代码 。…...
uniapp学习（010-3 实现H5和安卓打包上线）
零基础入门uniapp Vue3组合式API版本到咸虾米壁纸项目实战，开发打包微信小程序、抖音小程序、H5、安卓APP客户端等 总时长 23:40:00 共116P 此文章包含第114p-116p的内容 文章目录 H5配置文件设置开始打包上传代码 安卓设置模拟器启动设置基础配置设置图标启动界面…...
IPGuard与Ping32结合，提供企业级数据加密与防泄密解决方案，全面保障敏感数据安全
随着数字化转型的深入推进，企业面临着日益复杂的安全挑战。如何在确保数据流通的同时，保障企业的核心资产不被泄露，是每个企业必须面对的难题。为此，Ping32与IPGuard联合推出了一套全面的企业级数据加密与防泄密解决方案ÿ…...
爬虫与反爬-旋转验证码突破方案（知名短视频、TK海外版 及 某东等等）
概述：文本对旋转验证码进行了突破及讲述了实现原理，代码使用纯算法 OpenCV，使用代价较小同时不用安装一大堆AI训练相关的模组，方便且能够快速上手 当前亲自验证了能够支持的网站：国内知名短视频平台、海外版 以及 某东…...
霍夫变换：原理剖析与 OpenCV 应用实例
简介：本文围绕霍夫变换相关内容展开，先是讲解霍夫变换基本原理，包含从 xy 坐标系到 kb 坐标系及极坐标系的映射等。接着介绍了 cv2.HoughLines、cv2.HoughLinesP 概率霍夫变换、cv2.HoughCircles 霍夫圆变换的函数用法、参数含义、与常规霍夫…...
虚拟机之间复制文件
在防火墙关闭的前提下，您可以通过几种不同的方法将文件从一个虚拟机复制到另一个虚拟机。这里，我们假设您想要从 IP 地址为 192.168.4.5 的虚拟机上的 /tmp 文件夹复制文件到当前虚拟机（192.168.4.6）的 /tmp 文件夹下。以下是几种…...
漏洞管理与补丁管理详解：系统安全的基石
文章目录 漏洞管理与补丁管理详解：系统安全的基石什么是漏洞管理？什么是补丁管理？漏洞管理与补丁管理的联系与区别实施漏洞管理与补丁管理的最佳实践 漏洞管理与补丁管理详解：系统安全的基石 在网络安全的防护体系中，…...
ArrayList与LinkedList的区别是什么？
ArrayList与LinkedList是Java集合框架中实现List接口的两种常见类，它们各自具有独特的数据结构和特点，适用于不同的应用场景。 一、底层数据结构 ArrayList和LinkedList的底层数据结构是它们之间最本质的区别。 ArrayList： ArrayList是基于…...
《Java-数组》
《Java-数组》 1.数组介绍 概念：数组是一种容器，用来存储同种数据类型的多个值。注意：数组容器在存储数据的时候，需要结合隐式转换考虑； 2.数组的定义和初始化 2.1数组定义 定义格式1（常用）…...
Docker 实战：搭建本地 Registry 私有镜像仓库及批量导入脚本
前言：在我之前的博客中，我分享了 Harbor 仓库搭建的详细操作步骤。然而，在实际的生产环境中，并非每个 Docker 环境都需要部署一个规模庞大的 Harbor 仓库。有时，一个轻量级的本地 Registry 私有镜像仓库会更为便捷。本…...
MySQL 启动失败问题分析与解决方案：`mysqld.service failed to run ‘start-pre‘ task`
目录 前言1. 问题背景2. 错误分析2.1 错误信息详解2.2 可能原因 3. 问题排查与解决方案3.1 检查 MySQL 错误日志3.2 验证 MySQL 配置文件3.3 检查文件和目录权限3.4 手动启动 MySQL 服务3.5 修复 systemd 配置文件3.6 验证依赖环境 4. 进一步优化与自动化处理结语 前言 在日常…...
java-分而治之算法
分而治之（Divide and Conquer）算法是一种解决问题的策略，它将一个复杂的问题分解成若干个相同或相似的子问题，递归地解决这些子问题，然后将它们的解合并以解决原始问题。这种算法通常用于排序、搜索、数学计算等领域。…...
透明化教育管理：看板如何提升班级整体效率
随着教育信息化的不断推进，传统的教学和班级管理方式逐渐暴露出时间紧、任务繁、多任务并行等问题。看板管理，作为一种高效的可视化工具，正在成为教师管理教学、提升班级协作与互动的重要利器。通过透明化、系统化的管理方式，看板…...
UDP客户端服务器通信
在这篇博客中，我们将探索 UDP（用户数据报协议） 通信，简要地说，UDP 是一种无连接、快速但不可靠的通信协议，适用于需要快速数据传输但对丢包容忍的场景，比如视频流和在线游戏。就像《我是如此相信…...
helm手动部署Kafka集群
1、到指定node节点创建pv需挂载的目录，若有分布式存储可忽略 mkdir -p /data/kafka-data-0 mkdir -p /data/kafka-data-1 mkdir -p /data/kafka-data-2 mkdir -p /data/kafka-zookeeper-data-0 2、创建pvc ---apiVersion: v1kind: PersistentVolumemetadata:n…...
vue3 ajax获取json数组排序举例
使用axios获取接口数据 可以在代码中安装axios包，并写入到package.json文件： npm install axios -S接口调用代码举例如下： const fetchScore async () > {try {const res await axios.get(http://127.0.0.1:8000/score/${userInput.v…...
c/c++ 用easyx图形库写一个射击游戏
#include <graphics.h> #include <conio.h> #include <stdlib.h> #include <time.h>// 定义游戏窗口的大小 #define WINDOW_WIDTH 800 #define WINDOW_HEIGHT 600// 定义玩家和目标的尺寸 #define PLAYER_SIZE 50 #define TARGET_SIZE 20// 玩家的结构…...
大数据新视界 -- 大数据大厂之 Hive 数据安全：权限管理体系的深度解读（上）（15/ 30）
💖💖💖亲爱的朋友们，热烈欢迎你们来到 青云交的博客！能与你们在此邂逅，我满心欢喜，深感无比荣幸。在这个瞬息万变的时代，我们每个人都在苦苦追寻一处能让心灵安然栖息的港湾。而 我的…...