HTML和CSS实现的透明登录框效果
实现代码
HTML部分
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>透明登录框</title>
<link rel="stylesheet" href="denglu.css">
</head>
<body>
<div class="box">
<h2>Login</h2>
<form>
<div class="inputbox">
<input type="text" name="" required="">
<label>Username</label>
</div>
<div class="inputbox">
<input type="password" name=" " required="">
<label>Password</label>
</div>
<input type="submit" name="" value="submit">
</form>
</div>
</body>
</html>
CSS样式表部分
body{
margin:0px;
padding:0px;
font-family:sans-serif;
background: url(bs3.jpg);
background-size:cover;
}
.box{
position:absolute;
top:50%;
left:50%;
transform:translate(-50%,-50%);
/*实现块元素百分比下居中*/
width:450px;
padding:50px;
background: rgba(0,0,0,.8);
box-sizing:border-box;
box-shadow: 0px 15px 25px rgba(0,0,0,.5);
border-radius:15px;
}
.box h2{
margin:0 0 30px;
padding:;
color: #fff;
text-align:center;
}
.box .inputbox{
position:relative;
}
.box .inputbox input{
width: 100%;
padding:10px 0;
font-size:16px;
color:#fff;
letter-spacing: 1px;
margin-bottom: 30px;
border:none;
border-bottom: 1px solid #fff;
outline:none;
background: transparent;
}
.box .inputbox label{
position:absolute;
top:0px;
left:0px;
padding:10px 0;
font-size: 16px;
color:#fff;
pointer-events:none;
transition:.5s;
}
.box .inputbox input:focus ~ label,
.box .inputbox input:valid ~ label
{
top:-18px;
left:;
color:#03a9f4;
font-size:14px;
}
.box input[type="submit"]
{
background: transparent;
border:none;
outline:none;
font-size: 16px;
color:#fff;
background: #03a9f4;
padding:15px 20px;
cursor: pointer;
border-radius:10px;
}
来看一下最终展现的效果，这是一个动态的效果：
初始状态
输入中的状态，登录框中的username和password有一个动态过渡上浮的效果：
想知道具体是什么效果，可以自己动手尝试一下~
如果对其中的属性有不了解的地方，可以参考下面的注解版代码哦。
其中有涉及到相关选择器的知识，如有不解请参照 ：
https://www.cnblogs.com/nyw1983/p/11628364.html
body{
margin:0px;
padding:0px;
font-family:sans-serif;
/*设置字体为sans-serif*/
background: url(bs3.jpg);
background-size:cover;
/*背景图片尺寸为覆盖cover*/
}
.box{
position:absolute;
/*定位方式绝对定位absolute*/
top:50%;
left:50%;
/*顶和高同时设置50%实现的是同时水平垂直居中效果*/
transform:translate(-50%,-50%);
/*实现块元素百分比下居中*/
width:450px;
padding:50px;
background: rgba(0,0,0,.8);
/*背景颜色为黑色，透明度为0.8*/
box-sizing:border-box;
/*box-sizing设置盒子模型的解析模式为怪异盒模型，
将border和padding划归到width范围内*/
box-shadow: 0px 15px 25px rgba(0,0,0,.5);
/*边框阴影 水平阴影0 垂直阴影15px 模糊25px 颜色黑色透明度0.5*/
border-radius:15px;
/*边框圆角，四个角均为15px*/
}
.box h2{
margin:0 0 30px;
padding:;
color: #fff;
text-align:center;
/*文字居中*/
}
.box .inputbox{
position:relative;
}
.box .inputbox input{
width: 100%;
padding:10px 0;
font-size:16px;
color:#fff;
letter-spacing: 1px;
/*字符间的间距1px*/
margin-bottom: 30px;
border:none;
border-bottom: 1px solid #fff;
outline:none;
/*outline用于绘制元素周围的线
outline：none在这里用途是将输入框的边框的线条使其消失*/
background: transparent;
/*背景颜色为透明*/
}
.box .inputbox label{
/*<label> 标签为 input 元素定义标注（标记）*/
position:absolute;
top:0px;
left:0px;
padding:10px 0;
font-size: 16px;
color:#fff;
pointer-events:none;
/*鼠标事件消失，比如说选中文字，光标定位，超链接下划线*/
transition:.5s;
/*过渡时间5s*/
}
.box .inputbox input:focus ~ label,
.box .inputbox input:valid ~ label
{
top:-18px;
left:;
color:#03a9f4;
font-size:14px;
}
.box input[type="submit"]
{
background: transparent;
border:none;
outline:none;
font-size: 16px;
color:#fff;
background: #03a9f4;
padding:15px 20px;
cursor: pointer;
/*光标呈现为指示链接的指针（一只手）*/
border-radius:10px;
}
HTML和CSS实现的透明登录框效果的更多相关文章
- JQuery+CSS3实现封装弹出登录框效果
原文:JQuery+CSS3实现封装弹出登录框效果 上次发了一篇使用Javascript来实现弹出层的效果,这次刚好用了JQuery来实现,所以顺便记录一下: 因为这次使用了Bootstrap来做一个 ...
- Asp.net MVC+Bootstrap3的悬浮式登录框效果
1.引用Bootstarp3 @Styles.Render("~/Content/css") @Scripts.Render("~/bundles/bootstrap&q ...
- 用css伪类实现提示框效果
题目要求用css实现下图效果: 很明显难点就在那个多出去的三角形上,下面代码是用一个div来实现的,用到了伪类 : befor和 : after,使用这两个伪类活生生的在div之前和之后多出了&quo ...
- 第一百三十三节，JavaScript，封装库--弹出登录框
JavaScript,封装库--弹出登录框 封装库,增加了两个方法 yuan_su_ju_zhong()方法,将获取到的区块元素居中到页面,chuang_kou_shi_jian()方法,浏览器窗口事 ...
- javascript实例学习之三——类新浪微博的登录框
该登录框和百度的搜索框类似,可以实现如下效果: 1.文字输入时自动弹出提示层 2,提示层根据输入文字进行自动过滤 3,提示层可以使用上下按键进行选择 4,提示层可以点击或者回车来确认输入 微博登录框h ...
- JavaScript--结合CSS变形、缩放能拖拽的登录框
上例图: 代码块: <!DOCTYPE html> <html> <head lang="en"> <meta charset=" ...
- 拖动登录框 HTML+CSS+js
先上效果 代码 <!DOCTYPE html> <html lang="en"> <head> <meta charset="U ...
- phpmyadmin 4.x 版本无法看到登录框的处理
由于个人dreamhost即将到期问题,购买了一台VPS. 配置了一个CentOS 6.4 Linux 服务器,用Nginx+php-fpm搭建的环境. 这些都是废话,下面是重点: 当搭建后配置php ...
- java web 登录框
我们会骂 12306 的网站界面挫,效果差,速度慢,回头看看自己写的代码,是不是也一样的狗血!在前端,很多看似简单的东西,内藏无数玄机.本文将以一个小小的登录框为入口,谈一谈如何完善自己的程序. 在很 ...
随机推荐
- zabbix+grafana使用
参照文档 https://blog.csdn.net/xiegh2014/article/details/54928883
- win10安装mysql时报错[MY-012576] [InnoDB] Unable to create temporary file; errno: 2
报错信息 解决: 在my.ini文件里面的 [mysqld]区段内加入: #自己指定的临时文件目录 tmpdir="临时目录" 添加好后初始化成功 接下来启动mysql服务的时候报 ...
- PHP_OS的常见值
PHP_OS是PHP中的一个预定义常量,表示当前操作系统.那么PHP_OS有哪些值可用呢??PHP_OS的值一般可以为:CYGWIN_NT-5.1,Darwin,FreeBSD,HP-UX,IRIX6 ...
- python爬取b站排行榜
爬取b站排行榜并存到mysql中 目的 b站是我平时看得最多的一个网站,最近接到了一个爬虫的课设.首先要选择一个网站,并对其进行爬取,最后将该网站的数据存储并使其可视化. 网站的结构 目标网站:bil ...
- A+B and A*B problem 大数相加 相乘 模拟
A+B and A*B problem 大数相加 相乘 模拟 题意 给你两个数a和b,这两个数很大,然后输出这两个数相加的和,相乘的积. 解题思路 模拟,但是还是搜了搜代码实现,发现这个大佬写的是真的 ...
- [Codeforces 1239D]Catowise City(2-SAT)
[Codeforces 1239D]Catowise City(2-SAT) 题面 有n个主人,每个主人都有一只猫.每个主人认识一些猫(包括自己的猫).现在要选出一些人和一些猫,个数均大于0且总共为n ...
- Python 入门之 模块
Python 入门之 模块 1.模块 (1)模块是什么? 将一些常用的功能封装到一个文件中,那么这个存储着很多常用的功能的py文件,就是模块. 模块就是文件,存放一堆常用的函数.模块,就是一些常用 ...
- Python 入门之格式化输出
Python 入门之格式化输出 1.格式化 (1)%为占位 (2)%s --- 站字符串的位置(数字.字符串都能够进行填充) name = input('请输入姓名:') age = input('请 ...
- 6-2 如何读写json数据
通过查看help(json.dump)和help(json.dumps)帮助信息,dump是将转换格式到文件对象,而dumps转换格式到字符串. 一.Json.dumps() Json.dumps() ...
- python学习第五十四天hashlib模块的使用
hash算法 hash也做散列,也称为哈希,主要用于信息安全领域中加密算法,hash就是找一种数据内容和数据存放地址直接的映射关系. md5算法 md5讯息算法,广泛使用密码函数 md5算法的特点 1 ...