实现代码

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. Numpy——进阶篇

    impoort numpy as np arr=np.arange(10) #输出奇数 arr[arr%2==1] #将arr中的所有奇数替换为-1,而不改变arr out=np.where(arr% ...

  2. 洛谷P1347 排序

    这个题看到很多人写Topo排序,其实这道题第一眼看更像是一个差分约束的裸题QWQ... 令dis[x]表示x的相对大小(1是最小,n是最大),显然,对于一个关系A<B,我们有dis[A]< ...

  3. 删除MicrosoftOffice2016的扫尾工作

    因为用到一些画流程图之类的工具,想到以前用的Visio挺好用的,就找来安装一下,结果因为装了Microsoft Office2016在安装时报错不断,先说下网上的帖子:用OfficeDeploymen ...

  4. Thinkphp设置PC和手机端模板

    <?php // 判断手机端 function ismobile() { // 如果有HTTP_X_WAP_PROFILE则一定是移动设备 if (isset ($_SERVER['HTTP_X ...

  5. 安装Pycharm（方便编辑代码的IDE（编辑器））以及 使用Pycharm新建项目

    安装Pycharm(方便编辑代码的IDE(编辑器))以及 使用Pycharm新建项目 一.下载安装Pycharm 首先要下载Pycharm这个软件,官网的下载地址是: http://www.jetbr ...

  6. Apache与Tomcat联系及区别？？

    Apache与Tomcat都是Apache开源组织开发的用于处理HTTP服务的项目,两者都是免费的,都可以做为独立的Web服务器运行.Apache是Web服务器而Tomcat是Java应用服务器. A ...

  7. Restful风格API中用put还是post做新增操作有什么区别？

    Restful风格API中用put还是post做新增操作有什么区别? 转 头条面试归来,有些话想和Java开发者说!>>> 这个是华为面试官问我的问题,回来我找了很多资料,想验证这个 ...

  8. wordpress添加index页面跳转链接

    1. 制作page页面 1.1 在themes下的主题目录新建一个page页面 1.2 在wordpress后台新建页面跟在目录页面中相同名字的页面文件 1.3 复制后台页面中的古定链接 1.4 在i ...

  9. 05-Django-session-admin

    # session- 为了应对HTTP协议的无状态性- 用来保存用户比较敏感的信息- 属于request的一个属性- 常用操作: - request.session.get(key, defaultV ...

  10. Android模拟器运行慢的解决方案

    在android开发的过程,发现android模拟器的速度不是一般的慢,那主要是因为android模拟器默认采用的是arm处理器造成的,这里主要提供两种方法: ① 利用intel虚拟硬件加速的方式,实 ...