html css3登入代码,CSS3代码实例:CSS3制作网页登陆表单_css

文章简介：这个表单效果是很普通，但其制作采用的方法却很有创新，[email protected]�阴影等，最亮点是使用了calc()函数来计算定位的值。

这个表单效果是很普通，但其制作采用的方法却很有创新，[email protected]�阴影等，最亮点是使用了calc()函数来计算定位的值。这可是一种新玩法，虽然前面有介绍过这个属性的使用方法，后期的制作中却很少使用他，这个案例让我再次领略了calc()函数的功能。如果你喜欢，也可以尝试一下，自己动手丰衣足食。

表单的结构层出不穷，但我更喜欢Bootstrap中表单的结构，当然这个例子中白牙同学是没使用那种结构，但也是很清晰，也很简单：

u

p

Remember me

Login

Not a registered user yet?Sign up now!

常用到的样式代码就不另外单独介绍了，具体的可以参考样式代码中的注解：

/*基本样式*/

body {

background: url(bg.jpg) no-repeat center fixed;

background-size: 100% 100%;/*让背景图全屏显示，常用来制作全屏背景*/

}

.content {

width:600px;

height:420px;

margin:50px auto;

}

/*登录表单form样式*/

.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;

top:calc(100% + 20px);/*相当于bottom:-66px(div.not-registered自身的高度46px加上向下移动的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;

}

/*用户和密码的icon制作*/

.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;

}

/*表单input的样式*/

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

height:100%;

width:calc(100% - 40px);/*使用calc计算表单的宽度(其中40px是用来放icon的空间)*/

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:0;

height:0;

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:0;

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;

}

欢迎大家阅读《CSS3代码实例:CSS3制作网页登陆表单_css》,跪求各位点评,若觉得好的话请收藏本文，by 搞代码

搞代码网(gaodaima.com)提供的所有资源部分来自互联网，如果有侵犯您的版权或其他权益，请说明详细缘由并提供版权或权益证明然后发送到邮箱[email protected]，我们会在看到邮件的第一时间内为您处理，或直接联系QQ：872152909。本网站采用BY-NC-SA协议进行授权

转载请注明原文链接：CSS3代码实例:CSS3制作网页登陆表单_css