实现代码

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实现的透明登录框效果的更多相关文章

  1. JQuery+CSS3实现封装弹出登录框效果

    原文:JQuery+CSS3实现封装弹出登录框效果 上次发了一篇使用Javascript来实现弹出层的效果,这次刚好用了JQuery来实现,所以顺便记录一下: 因为这次使用了Bootstrap来做一个 ...

  2. Asp.net MVC+Bootstrap3的悬浮式登录框效果

    1.引用Bootstarp3 @Styles.Render("~/Content/css") @Scripts.Render("~/bundles/bootstrap&q ...

  3. 用css伪类实现提示框效果

    题目要求用css实现下图效果: 很明显难点就在那个多出去的三角形上,下面代码是用一个div来实现的,用到了伪类 : befor和 : after,使用这两个伪类活生生的在div之前和之后多出了&quo ...

  4. 第一百三十三节，JavaScript，封装库--弹出登录框

    JavaScript,封装库--弹出登录框 封装库,增加了两个方法 yuan_su_ju_zhong()方法,将获取到的区块元素居中到页面,chuang_kou_shi_jian()方法,浏览器窗口事 ...

  5. javascript实例学习之三——类新浪微博的登录框

    该登录框和百度的搜索框类似,可以实现如下效果: 1.文字输入时自动弹出提示层 2,提示层根据输入文字进行自动过滤 3,提示层可以使用上下按键进行选择 4,提示层可以点击或者回车来确认输入 微博登录框h ...

  6. JavaScript--结合CSS变形、缩放能拖拽的登录框

    上例图: 代码块: <!DOCTYPE html> <html> <head lang="en"> <meta charset=" ...

  7. 拖动登录框 HTML+CSS+js

    先上效果 代码 <!DOCTYPE html> <html lang="en"> <head> <meta charset="U ...

  8. phpmyadmin 4.x 版本无法看到登录框的处理

    由于个人dreamhost即将到期问题,购买了一台VPS. 配置了一个CentOS 6.4 Linux 服务器,用Nginx+php-fpm搭建的环境. 这些都是废话,下面是重点: 当搭建后配置php ...

  9. java web 登录框

    我们会骂 12306 的网站界面挫,效果差,速度慢,回头看看自己写的代码,是不是也一样的狗血!在前端,很多看似简单的东西,内藏无数玄机.本文将以一个小小的登录框为入口,谈一谈如何完善自己的程序. 在很 ...

随机推荐

  1. wpf datagrid tooltip

    <DataGridTemplateColumn Header="购方名称" Width="260" HeaderStyle="{StaticRe ...

  2. windows下简单安装postgres

    目前版本是PostgreSQL 9.6,它经过以下平台认证: 32位Windows Windows 7,8和10 Windows 2008 Server 64位Windows Windows 7,8和 ...

  3. Linux setup

    Install centos 7: Config Network a config example in /etc/sysconfig/network-scripts/ifcfg-ens160 TYP ...

  4. 【Go语言】map在goroutine通信中的使用问题

    简介 本篇文章的主要内容是解决go语言map在使用中遇到的两个问题,对于初学者是不可避免的坑 一.cannot assign to struct field 当map中存在struct类型的成员,如果 ...

  5. centos6.9 安装mysql8

    centos6.9 安装 mysql8 # 安装mysql8 1.下载https://cdn.mysql.com//Downloads/MySQL-8.0/mysql-8.0.16-2.el6.x86 ...

  6. Nginx日志监控 使用 goaccess查看nginx日志

    nginx日志监控 yum install goaccess   安装使用教程 goaccess access.log -o ../html/report.html --real-time-html ...

  7. 图——图的Floyd法最短路径实现

    1,Dijkstra 算法一次性求得起始顶点到所有其它顶点的最短路径,如果想要求解任意两个顶点之间的最短路径,可将图中顶点作为起始顶点执行 n 次 Dijkstra 算法就可以了: 2,可能解决方案: ...

  8. 在java程序中利用线程

    package 第十一章; import java.awt.Button; import java.awt.Color; import java.awt.Font; import java.awt.F ...

  9. 关于“如何只用2GB内存从20亿，40亿，80亿个整数中找到出现次数最多的数？”的一种思路

    小弟不才,只懂一些c#的皮毛,有一些想法, int32值范围大概在-20亿——20亿,按hashtable一个keyvalue占8B的设定来说,最大可以存储大约2.5亿个 数字-次数对. 那么,可以将 ...

  10. JavaScript生成简单数字验证码

    <!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8& ...