html实现好看的注册页面,html+css做一个好看的可翻转登录注册界面代码实例
本篇文章小编给大家分享一下html+css做一个好看的可翻转登录注册界面代码实例,小编觉得挺不错的,现在分享给大家供大家参考,有需要的小伙伴们可以来看看。
做一个好看的可翻转登录注册界面
前言
最近在尝试做网盘,使用的技术栈大概是 .net core + MVC + Mysql + Layui,主要目的是通过这个具体的项目,熟悉熟悉 .net core 开发,.net 的未来就是他了!
用户点击 sign up 之后从登录翻转到注册,点击 log in 从注册翻转到登录
从技术上来说应该是不难的,但是 B 格 看起来立刻就高了不少啊!!!!
具体效果可以直接拉到最下面
具体实现
Html
Login
LOGIN
If you don't have account.Please
Click here to Sign Up
Register
Register
Have a account ? You can
Click here to Log in
Css
body {
/*颜色这个看个人喜好*/
background: darkslategrey;
/*字体这个看个人喜好*/
font-family: sans-serif;
}
/*主要是规定中间表单尺寸,调整到自己觉得好看就行了*/
.mainbody {
height: 440px;
width: 400px;
}
/*居中效果*/
.middle {
/*使左上角对应到父元素的中心*/
top: 50%;
left: 50%;
position: absolute;
/*向左向上偏移50%*/
transform: translate(-50%, -50%);
}
.form-box {
width: 100%;
height: 100%;
margin: auto;
background: darkcyan;
/* 我觉得这个圆角大小刚刚好 */
border-radius: 40px;
}
.input-normal {
width: 220px;
height: 38px;
margin: 30px auto;
padding: 0;
text-align: center;
border-radius: 20px;
outline: none;
display: block;
transition: 0.3s;
border: 1px solid #e6e6e6;
}
.btn-submit {
width: 100px;
height: 36px;
margin: auto;
font-size: 18px;
text-align: center;
color: white;
border-radius: 20px;
display: block;
background: darkslategrey;
transition: 0.3s;
}
.front {
transform: rotateY(0deg);
}
/* 将back旋转180度,背面朝向用户,我这边选y轴的 */
.back {
transform: rotateY(-180deg);
}
.front,
.back {
position: absolute;
/* 然后设置为背面朝向用户时不可见 */
backface-visibility: hidden;
/* 我觉得用linear顺滑一点 */
transition: 0.3s linear;
}
/* 将front旋转180度 */
.middle-flip .front {
transform: rotateY(180deg);
}
/* 将back旋转180度 */
.middle-flip .back {
transform: rotateY(0deg);
}
/* 我调整了一下,感觉还不错的样式,你可以改成其他的好看点的 */
p {
margin: 15px auto;
padding: 0;
font-size: 16px;
color: white;
display: block;
text-align: center;
}
a {
color: aqua;
cursor: pointer;
}
js
// 点击sigup触发翻转样式
$("#sigup").click(function() {
$(".middle").toggleClass("middle-flip");
});
// 点击login触发翻转样式
$("#login").click(function() {
$(".middle").toggleClass("middle-flip");
});
效果
看起来好像还行的样子啊
可以考虑在 transfrom 后面加点 perspective ,增强立体感
我用的 perspective(600px)
不管你们怎么想,反正我觉得这个效果还是挺绿的
html实现好看的注册页面,html+css做一个好看的可翻转登录注册界面代码实例相关推荐
- python 搭建登陆系统,用Python连接操作MySQL数据库,做一个简单的用户登录注册系统...
我们可以很容易地用Python实现一个用户登录系统,相信这即使是对编程新手来说也是小菜一碟. 作为Python的小萌新,今天我想记录下来的是如何实现一个连接了MySQL数据库的用户登录注册系统,它的效 ...
- 用HTML+CSS做一个漂亮简单的个人网页~个人相册介绍个人主页模板(6个页面) ~学生HTML个人网页作业作品~
用HTML+CSS做一个漂亮简单的个人网页 ~ 个人相册介绍个人主页模板(6个页面) 学生HTML个人网页作业作品 临近期末, 你还在为HTML网页设计结课作业,老师的作业要求感到头大?HTML网页作 ...
- 用HTML+CSS做一个漂亮简单的个人网页~个人相册介绍个人主页模板(6个页面) ~学生HTML个人网页作业作品~...
用HTML+CSS做一个漂亮简单的个人网页 ~ 个人相册介绍个人主页模板(6个页面) 学生HTML个人网页作业作品 临近期末, 你还在为HTML网页设计结课作业,老师的作业要求感到头大?HTML网页作 ...
- 【4003】通过html+css做一个图片列表的静态页面。
[4003]通过html+css做一个图片列表的静态页面. 学习目标: [ 1]学习前端第三天掌握 html与css(基础选择器,有.无序列表相关)入门知识,梳理今天的学习知识点: [ 2]通过已学知 ...
- 做一个好看的微信小程序抽奖页面
在微信小程序中做一个好看的抽奖界面 先上图片吧: 基本上格式就是八个抽奖按钮,中间一个开始按钮,后面在加一张好看的背景图就完事啦 接下来就是代码啦: js中: var app = getApp() P ...
- css字体倾斜角度_css如何实现渐变效果?css背景色渐变与文字渐变效果的实现(代码实例)...
在前端网页开发的时候,往往会用到一些渐变色的效果,这样可以使得前端页面更加美观.那么这些渐变效果是如何用css代码实现出来的?本章就给大家带来css如何实现渐变效果?css背景色渐变与文字渐变效果的实 ...
- 如何用css做一个爱心
摘要:HTML的标签都比较简单,入门非常的迅速,但是CSS是一个需要我们深度挖掘的东西,里面的很多样式属性掌握几个常用的便可以实现很好看的效果,下面我便教大家如何用CSS做一个爱心. 前期预备知识: ...
- 【CSS】如何用css做一个爱心
摘要:HTML的标签都比较简单,入门非常的迅速,但是CSS是一个需要我们深度挖掘的东西,里面的很多样式属性掌握几个常用的便可以实现很好看的效果,下面我便教大家如何用CSS做一个爱心. 前期预备知识: ...
- 使用Idea做一个淘宝的登录页面和手机页面
一.使用Idea做一个淘宝的登录页面 代码如下 <!DOCTYPE html> <html lang="en"> <head><meta ...
- 用html和css做一个旋转的正方体
用html和css做一个旋转的正方体 <!DOCTYPE html> <html lang="en"> <head><meta chars ...
最新文章
- mapreduce程序输出评分8.6分以上的书名和评分_如何选编程入门资料?光评分高怎么够|文末赠书...
- 设计模式--适配器(Adapter)模式
- 手把手教你搭建用户画像,数据分析效率提升百倍
- Django框架(三)—— orm增删改查、Django生命周期
- python调用math函数_Python中sqrt函数使用方法
- 视频PPT互动问答丨数据驱动的业务实践专题
- 1015. vs项目编译成功INSTALL时
- Spark学习之第一个程序打包、提交任务到集群
- Qt总结之五:读写文件操作
- java 测试用例核心代码_核心Java测验
- 5图片加载优化_开发说做了性能优化,到底做了啥
- 控制Dell服务器的风扇转速
- 英特尔第十代处理器为什么不支持win7_为什么7代CPU不支持WIN7,原因是什么-i7不支持win7,win7最高支持几代cpu...
- Pyqt通过鼠标滚轮进行缩放界面
- 哈尔滨学计算机编程学校,哈尔滨中小学生编程学校排名
- 微信网页开发wx.getLocation在安卓手机上的一个坑
- SAP 中Table的使用(一、显示数据)
- 机器学习中qa测试_学会区分人工智能和机器学习,并了解QA测试方法
- 2021第二届大海道越野耐力赛暨中国汽车越野锦标赛分站赛
- unity InputField 光标位置