实现代码

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. ARTS-1

    ARTS的初衷 Algorithm:主要是为了编程训练和学习.每周至少做一个 leetcode 的算法题(先从Easy开始,然后再Medium,最后才Hard).进行编程训练,如果不训练你看再多的算法 ...

  2. CSS3——背景 文本 字体 链接 列表样式 表格

    背景 background-color rgb(255,0,0,1)      最后一个值表示透明度,范围是 0--1 background-image 默认平铺重复显示 background-rep ...

  3. 【Airtest】由于Airtest中long_click无法实现长按，教你如何在Airtest中实现长按的方法

    Airtest中我们想要实现长按操作,poco中有一个方法long_click,但是实际使用了一下,发现并没有卵用,仍然是单击操作,如下图 那我们要如何进行长按操作呢?其实可以利用swipe实现,以长 ...

  4. UVA11987 带删除并查集

    1~n,n个数,初始每个数独自作为一个集合,然后进行m次操作.操作有三种:1 p q :把 p 所在的集合合并到 q 所在的集合 2 p q :把 p 从 p 的集合中拿出,放到 q 的集合里 3 p ...

  5. 【Qt开发】Qt5.7中文显示乱码解决方法两种

    升级到Qt5.X之后,原先解决的Qt显示中文乱码的方法突然不适用了,找了很多方式来解决这个问题 第一种: 在公司代码里看到的方法,先将对应的cpp文件用windows自带的记事本打开,另存为UTF-8 ...

  6. vue封装一些常用组件loading、switch、progress

    vue封装一些常用组件loading.switch.progress github文档https://github.com/zengjielin/vue-component-library loadi ...

  7. 路由器桥接时，为什么要关闭 DHCP 服务器？

    问:看网上的一些教程,路由器设置无线桥接的时候,副路由器中的 DHCP 服务器需要关闭,请问这是为什么? 答:两个路由器无线桥接时,之所以要关闭副路由器的 DHCP 服务器,是为了避免 IP 地址错误 ...

  8. [百家号]APT组织简介2019

    5家新APT组织被披露,2019是“后起之秀”的天下? https://baijiahao.baidu.com/s?id=1621699899936470038&wfr=spider& ...

  9. 2019 CSP-S初赛游记

    2019-10-19 ——这个注定要被载入史册的日子 作为一名初中生,和lpy大佬一同参加提高组的比赛,而今年普及组和提高组的时间竟然不一样,于是——凌晨六点半,来到了pdyz和高中生一起坐车去. 高 ...

  10. 18: vue-element-admin使用

    1.1 vue-element-admin使用 1.使用参考网站 1)官方演示环境: https://panjiachen.github.io/vue-element-admin/#/dashboar ...