实现代码

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. anr以及nlp语音自动化测试方案

    进行asr自动化测试 1.将人工语音录制的音频文件分为一句话一个文件,并将文件名命名为此句话,可以加后缀,例如:附近的公园_1 2.使用电脑连接蓝牙音箱,控制好距离角度等环境 3.使用python或者 ...

  2. DB.JDBC_jar_下载

    1.Download Microsoft JDBC Driver for SQL Server - SQL Server _ Microsoft Docs.html(https://docs.micr ...

  3. 20191127 Spring Boot官方文档学习（4.11）

    4.11.使用NoSQL技术 Spring Data提供了其他项目来帮助您访问各种NoSQL技术,包括: Redis MongoDB Neo4J Solr Elasticsearch Cassandr ...

  4. SOAP详解(转)

    1. SOAP简介 1.1应用背景 对于应用程序开发来说,使程序之间进行因特网通信是很重要的.目前的应用程序通过使用远程过程调用(RPC)在诸如 DCOM 与 CORBA 等对象之间进行通信,但是 H ...

  5. 第十四周总结 Io之文件流

    I/O相关 输入/输出 流(数据流动) 数据流动的方向 读数据(输入input) 写数据(输出output) 文件流 字符流 数据流 对象流 网络流.... 1.什么叫文件 一种电脑的存储方式 文件有 ...

  6. [Python3] 003 变量类型概述 & 数字类型详叙

    目录 0. 变量类型概述 1. 数字类型详叙 1.1 整数 1.1.1 常用进制 1.1.2 少废话,上例子 1.2 浮点数 1.2.1 使用浮点数时可以"偷懒" 1.2.2 科学 ...

  7. echart 柱状图 两个纵轴坐标 刻度不一样

    在使用echart的过程中, 有的时候柱状图会使用两个纵坐标, 如果两个纵坐标的最大值是一样的还好,这样刻度也会一样. 但是多数情况下最大值是不一样的, 这样就造成了,刻度线很乱,显示不均匀. 解决办 ...

  8. OD消息断点

    [文章作者]: icefisher[作者邮箱]: 181712814@qq.com[软件下载]: [软件名称]: echap518.exe(只是供学习的crackme)[加壳方式]: 里面直接有个un ...

  9. webpack output的path publicPath

    path是用来定义入口文件保存的地址,而publicPath是定义非入口文件需要抽离保存的第三方文件的保存地址 vue-cli 中HtmlWebpackPlugin生成html,都会存在path路径上 ...

  10. python利用(threading,ThreadPoolExecutor.map,ThreadPoolExecutor.submit) 三种多线程方式处理 list数据

    需求:在从银行数据库中取出 几十万数据时,需要对 每行数据进行相关操作,通过pandas的dataframe发现数据处理过慢,于是 对数据进行 分段后 通过 线程进行处理: 如下给出 测试版代码,通过 ...