实现代码

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. 中国MOOC_零基础学Java语言_第1周 计算_第1周编程题_1温度转换

    第1周编程题 依照学术诚信条款,我保证此作业是本人独立完成的. 温馨提示: 1.本次作业属于Online Judge题目,提交后由系统即时判分. 2.学生可以在作业截止时间之前不限次数提交答案,系统将 ...

  2. 【算法与数据结构】并查集 Disjoint Set

    并查集(Disjoint Set)用来判断已有的数据是否构成环. 在构造图的最小生成树(Minimum Spanning Tree)时,如果采用 Kruskal 算法,每次添加最短路径前,需要先用并查 ...

  3. Java 语言特性之 Annotation 注解

    利用 Java 的反射机制,可以在运行时获取 Java 类的注解信息. 注解 注解的特性 注解是 Java 5 的一个新特性,是插入代码中的一种注释或者说是元数据.注解并不是程序代码,可以对程序作出解 ...

  4. 获取当前操作的IFrame 对象的方法

    分两种情况:第一种:获取iframe对象的JS函数在父页面上,如下 function getIframeByElement(element){ var iframe; $("iframe&q ...

  5. java日常统计

    姓名:Danny         日期:2017/11/27 任务 日期 听课 编程程序 阅读课本 准备考试 日统计 周一 30 120 150 周二 50 140 190 周三 周四 周五 周六 周 ...

  6. java中的命名规则

    转载自:http://growstep.diandian.com/post/2011-08-17/3989094 1.类名首字母应该大写.属性(成员变量).方法.对象变量以及所有标识符(如形式参数.实 ...

  7. [DS+Algo] 009 树的介绍

    目录 1. 树的概念 2. 树的术语 3. 树的种类 4. 常见应用场景 5. 二叉树 1. 树的概念 每个结点(节点)有 0 个或多个子结点 没有父结点的结点称为根结点 每一个非根结点有且只有一个父 ...

  8. Python内置函数eval

    英文文档: eval(expression, globals=None, locals=None) The arguments are a string and optional globals an ...

  9. python递归方式和普通方式实现输出和查询斐波那契数列

    ●斐波那契数列 斐波那契数列(Fibonacci sequence),是从1,1开始,后面每一项等于前面两项之和. 如果为了方便可以用递归实现,要是为了性能更好就用循环. ◆递归方式实现生成前30个斐 ...

  10. leetcode第一题(easy)

    第一题:题目内容 Given an array of integers, return indices of the two numbers such that they add up to a sp ...