要求

    • 必备知识

      基本了解CSS语法,初步了解CSS3语法知识。

    • 开发环境

      Adobe Dreamweaver CS6

    • 演示地址

      演示地址

预览截图(抬抬你的鼠标就可以看到演示地址哦):

制作步骤:

一, 引入prefixfree.js脚本

下面代码中使用了CSS3无前缀脚本prefixfree.js,可以省去CSS3中前缀“-moz”、“-webkit”、“-o”、“-ms”，如对该脚本不了解的可以点击下面链接哦:CSS3无前缀脚本prefixfree.js与Animatable使用介绍，不过使用上还是略有出入，自己认真看看哦。

<script type="text/javascript" charset="UTF-8" src="prefixfree.min.js"></script>

二, <body>标签结构

<body>

       <div class="content">

           <form action="" method="post" class="login-form">

               <div class="username">

                   <input type="text" name="username" placeholder="emma.watson@gmail.com" autocomplete="on" />

                   <span class="user-icon icon">u</span>

               </div>

               <div class="password">

                   <input type="password" name="password" placeholder="*******" />

                   <span class="password-icon icon">p</span>

               </div>

               <div class="account-control">

                   <input type="checkbox" name="Remember me" id="Remember me" value="Remember me" checked="checked" />

                   <label for="Remember me" data-on="c" class="check"></label>

                   <label for="Remember me" class="info">Remember me</label>

                   <button type="submit">Login</button>

               </div>

               <p class="not-registered">Not a registered user yet?<a>Sign up now!</a></p>

           </form>

       </div>

</body>

三，CSS代码

body {

   background: url(bg.png);

   background-size: 100% 100%;

   margin:;

   padding:;}

.content {

    width:600px;

    height:420px;

    margin:50px auto;

}

.login-form {

    width:400px;

    height:177px;

    margin:70px auto 0;

    padding-top:73px;

    position:relative;

    background-image:-*-linear-gradient(top,rgb(255,255,255),rgb(242,242,242));

    box-shadow:0 3px 3px rgba(21,62,78,0.8);

}

.login-form:before {

    content:"";

    position:absolute;

    top:-50px;

    left:150px;

    width:102px;

    height:102px;

    padding:2px;

    border:1px solid rgb(216,216,219);

    background:#fff url("profilepicture.jpg") no-repeat 2px 2px;

}

.not-registered {

    position:absolute;

    color:rgb(153,153,153);

    font-weight:bold;

    font-size:13px;

    top:calc(100% + 20px);

    background-color:rgb(255,255,255);

    width:400px;

    height:46px;

    margin:0 auto;

    line-height:46px;

    text-align: center;

    box-shadow:0 3px 3px rgba(21,62,78,0.8);

}

.not-registered a {

    margin-left:5px;

    text-decoration: none;

    color:rgb(52,119,182);

    cursor: pointer;

}

.login-form div {

    width:216px;

    height:28px;

    margin:20px auto;

    position:relative;

    line-height:28px;

    border:none;

}

.login-form .user-icon,

.login-form .password-icon {

    display:inline-block;

    font-family: 'loginform-icon';

    font-size:15px;

    text-align:center;

    line-height:28px;

    color:rgb(153,153,153);

    position:absolute;

    left:1px;

    top:1px;

    background-color:rgb(255,255,255);

    border:none;

    border-right:1px solid rgb(229,229,232);

    width:30px;

    height:28px;

    transition: all 300ms linear;

}

.login-form .username input, .login-form .password input {

    height:100%;

    width:calc(100% - 40px);

    padding-left:40px;

    border-radius:2px;

    border:1px solid;

    border-color:rgb(229,229,232) rgb(220,220,221) rgb(213,213,213) rgb(220,220,221);

    display:block;

    transition: all 300ms linear;

}

.login-form .icon:before, .login-form .icon:after {

    content:"";

    position:absolute;

    top:10px;

    left:30px;

    width:;

    height:;

    border:4px solid transparent;

    border-left-color:rgb(255,255,255);

}

.login-form .icon:before {

    top:9px;

    border:5px solid transparent;

    border-left-color:rgb(229,229,232);

}

.login-form .username input:focus, .login-form .password input:focus {

    border-color:rgb(69,153,228);

    box-shadow:0 0 2px 1px rgb(200,223,244);

}

.login-form .username input:focus + span, .login-form .password input:focus + span {

    background:-*-linear-gradient(top,rgb(255,255,255),rgb(245,245,245));

    color:rgb(51,51,51);

}

.login-form .username input:focus + span:after, .login-form .password input:focus + span:after {

    border-left-color:rgb(250,250,250);

}

.login-form .account-control label {

    margin-left:24px;

    font-size:12px;

    font-family: Arial, Helvetica, sans-serif;

    cursor:pointer;

}

.login-form button[type="submit"] {

    color:#fff;

    font-weight:bold;

    float:right;

    width:68px;

    height:30px;

    position:relative;

    background:-*-linear-gradient(top,rgb(74,162,241),rgb(52,119,182)) 1px 0 no-repeat,

               -*-linear-gradient(top,rgb(52,118,181),rgb(36,90,141)) left top no-repeat;

    background-size:66px 28px,68px 29px;

    border:none;

    border-top:1px solid rgb(52,118,181);

    border-radius:2px;

    box-shadow:inset 0 1px 0 rgb(86,174,251);

    text-shadow:0 1px 1px rgb(51,113,173);

    transition: all 200ms linear;

}

.login-form button[type="submit"]:hover {

    text-shadow:0 0 2px rgb(255,255,255);

    box-shadow:inset 0 1px 0 rgb(86,174,251),0 0 10px 3px rgba(74,162,241,0.5);

}

.login-form button[type="submit"]:active {

    background:-*-linear-gradient(top,rgb(52,119,182),rgb(74,162,241)) 1px 0 no-repeat,

               -*-linear-gradient(top,rgb(52,118,181),rgb(36,90,141)) left top no-repeat;

}

.login-form .account-control input {

    width:0px;

    height:0px;

}

.login-form label.check {

    position:absolute;

    left:;

    top:50%;

    margin:-8px 0;

    display:inline-block;

    width:16px;

    height:16px;

    line-height: 16px;

    text-align:center;

    border-radius:2px;

    background:-*-linear-gradient(top,rgb(255,255,255),rgb(246,246,246)) 1px 1px no-repeat,

               -*-linear-gradient(top,rgb(227,227,230),rgb(165,165,165)) left top no-repeat;

    background-size:14px 14px,16px 16px;

}

.login-form .account-control input:checked + label.check:before {

    content:attr(data-on);

    font-family:loginform-icon;

}

@font-face {

  font-family: 'loginform-icon';

  src: url("font/loginform-icon.eot");

  src: url("font/loginform-icon.eot?#iefix") format('embedded-opentype'),

       url("font/loginform-icon.woff") format('woff'),

       url("font/loginform-icon.ttf") format('truetype'),

       url("font/loginform-icon.svg#loginform-icon") format('svg');

  font-weight: normal;

  font-style: normal;

}

OK，制作完成！自己动手试试吧。以上代码来源与互联网,本人只稍做修改了,案例仅供学习参考使用哦。

如以上文章或链接对你有帮助的话，别忘了在文章结尾处轻轻点击一下 “还不错”按钮或到页面右下角点击 “赞一个” 按钮哦。你也可以点击页面右边“分享”悬浮按钮哦，让更多的人阅读这篇文章。

作者:Li-Cheng
本文版权归作者和博客园共有，欢迎转载，但未经作者同意必须保留此段声明，且在文章页面明显位置给出原文连接，否则保留追究法律责任的权利。

到网上收集了一个“高大上”的CSS3登入表单和大家分享一下的更多相关文章

  1. 自制“低奢内”CSS3登入表单，包含JS验证，请别嫌弃哦。

    要求 必备知识 基本了解CSS语法,初步了解CSS3语法知识.和JS/JQuery基本语法. 开发环境 Adobe Dreamweaver CS6 演示地址 演示地址 预览截图(抬抬你的鼠标就可以看到 ...

  2. 9款大气实用的HTML5/CSS3注册登录表单

    1.HTML5/CSS3仿Facebook登录表单 利用CSS3制作的登录表单的确很漂亮,我们在html5tricks网站上也分享过几款了,比如CSS3密码强度验证表单可以显示密码的强度,这款纯CSS ...

  3. jQuery和CSS3超酷表单美化插件

     这是一款效果很精美炫酷的jQuery和CSS3联系方式表单美化插件.大多数站点上都有让用户填写的联系方式表单,一个设计良好的表单可以大大的提升用户的体验度.该表单美化插件在原生HTML表单的基础上进 ...

  4. JavaWeb网上图书商城完整项目--day02-4.regist页面提交表单时对所有输入框进行校验

    1.现在我们要将table表中的输入的参数全部提交到后台进行校验,我们提交我们是按照表单的形式提交,所以我们首先需要在table表外面添加一个表单 <%@ page language=" ...

  5. 用angular实时获取本地localStorage数据,实现一个模拟后台数据登入的效果

    研究了一上午,终于做出了,实时获取本地localStorage来模拟注册登入~~~ <!DOCTYPE html><html><head lang="en&qu ...

  6. DHTMLX 前端框架 建立你的一个应用程序 教程(八)-- 添加表单Form

    添加表单Form 我们下一步是在页面中添加一个表单,表格中的选中字段将会显示在表单中.提供一个提交按钮 可以对显示的数据进行修改提交. 添加表单到布局单元格中 1.在右侧布局中使用attachForm ...

  7. CSS3实战开发 表单发光特效实战开发

    首先,我们先准备好html代码: <!doctype html> <html> <head> <meta charset="utf-8"& ...

  8. 我和小美的撸码日记(3)之中的一个句话搞定MVC表单页数据绑定与提交

    另外献上在<线体验Demo地址>希望大家也能从中得到一些启示. 地址:http://121.40.148.178:8080/ . username:guest,password:12345 ...

  9. 一个web应用的诞生--数据表单

    下面把角色分为两种,普通用户和管理员用户,至少对于普通用户来说,直接修改DB是不可取的,要有用户注册的功能,下面就开始进行用户注册的开发. 用户表 首先要想好用户注册的时候需要提供什么信息:用户名.密 ...

随机推荐

  1. 两个jsp文件运行后弹出对话框 下载文件问题

    这个问题是两个jsp字符编码不一致的问题 如图所示 划线部分是要特别注意的地方 出错往往是这里 有时是“;”后面有无空格 如果login.jsp有 那么loginCheck.jsp也必须要有而且是同样 ...

  2. find的用法（完整）

    一.根据文件或者正则表达式进行匹配 1.列出当前目录(/.code)及子目录下所有文件和文件夹 find . 2.在当前目录(/.code)下查找以.pdf结尾的文件名 find .  -name & ...

  3. I - Dividing Stones

    Description There are N stones, which can be divided into some piles arbitrarily. Let the value of e ...

  4. Cannot retrieve metalink for repository: epel/x86_64. Please verify its path and try again 问题分析

    Cannot retrieve metalink for repository: epel/x86_64. Please verify its path and try again Loaded pl ...

  5. SQL SERVER的锁机制（三）——概述（锁与事务隔离级别）

    五.锁与事务隔离级别 事务隔离级别简单的说,就是当激活事务时,控制事务内因SQL语句产生的锁定需要保留多入,影响范围多大,以防止多人访问时,在事务内发生数据查询的错误.设置事务隔离级别将影响整条连接. ...

  6. 利用 Azure Devops 创建和发布 Nuget 包

    利用 Azure Devops 创建和发布 Nuget 包 原 Visual Studio Team Service ,简称 VSTS,能够创建 pipelines 管道以构建应用程序,并将其部署到任 ...

  7. asp.net core 健康检查

    asp.net core 健康检查 ASP.NET Core 2.2 开始,提供了健康检查中间件和库,用来报告应用基础结构组件的运行状况.官方文档在此 运行状况检查由应用程序作为 HTTP 终结点公开 ...

  8. AEAI Portal 权限体系说明

    1.概述 在数通畅联的产品体系中,AEAI Portal毫无疑问的占据了很重要的地位,在这里我们将通过参考Portal样例,讲述一下AEAI Portal权限体系的控制方法.在Portal使用过程中, ...

  9. 【转】C# Enum,Int,String的互相转换 枚举转换

    Enum为枚举提供基类,其基础类型可以是除 Char 外的任何整型.如果没有显式声明基础类型,则使用 Int32.编程语言通常提供语法来声明由一组已命名的常数和它们的值组成的枚举. 注意:枚举类型的基 ...

  10. Weekly Contest 133

    1030. Matrix Cells in Distance Order We are given a matrix with R rows and C columns has cells with ...