要求

    • 必备知识

      基本了解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. 王家林系列之scala--第69讲：Scala并发编程react、loop代码实战详解

    刚才看了一下,群里王家林老师又更新课程了,真为王老师的勤奋感到佩服,于是迫不及待的下载下来观看学习.本期讲的是关于scala并发编程的react.loop代码实战. 信息来源于 DT大数据梦工厂微信公 ...

  2. U盘或者移动银盘退出时一直显示占用中问题解决--最粗暴解决方式

    问题描述: ---------------------------弹出 USB 大容量存储设备 时出问题---------------------------Windows 无法停用“通用卷”设备,原 ...

  3. hdu 1698 Just a Hook 【线段树+lazy】

    题目 写了一天的线段树,这道题主要说明一下sum是赋值的,不是累加的,并且在push_down的时候lazy也是赋值的.因可能对懒标记的理解还不是很透彻吧. #include <iostream ...

  4. Poj2296

    题意:给定n个点,然后在每个点在一个正方形的上边或者下边的中点,并且所有的正方形等大且不能重叠.求正方形最大的边长是多少. 思路:很明显的二分边长+判定.不过判定要用到2-sat,算是2-sat的入门 ...

  5. chrome常用小插件

    1.广告终结者                    (去广告) 2.adsafe2.0.1                  (去广告) 3.Infinity New Tab           ( ...

  6. Java学习--数组与方法

    1. public class MethodDemo01{ public static void main(String args[]){ printInfo() ; // 调用printInfo() ...

  7. [php]PHP_函数收集

    //http://php.net/manual/en/control-structures.break.php //break ends execution of the current for, f ...

  8. ORACLE ERP consolidation流程(一)

    原文地址:ORACLE ERP consolidation流程(一) 作者:wolfyuan ORACLE EBS by transaction consolidation的详细流程(一)[@more ...

  9. jsp中文乱码解决办法

    一.JSP页面显示乱码 二.表单提交中文时出现乱码 三.数据库连接 大家在JSP的开发过程中,经常出现中文乱码的问题,可能一至困扰着您,我现在把我在JSP开发中遇到 的中文乱码的问题及解决办法写出来供 ...

  10. linux上安装python2.7.11

    好久不玩儿linux了,本来就不熟,现在几乎白痴.步骤如下: 从python官网上下载python的源代码 tar zvxf后得到一个文件夹: 进入Python-2.7.11,按照https://do ...