用Html5和csss3做出漂亮的登录注册界面

首先给大家推荐一下我老师大神的人工智能教学网站。教学不仅零基础,通俗易懂,而且非常风趣幽默,还时不时有内涵黄段子!点这里可以跳转到网站

用html5和css3切换登录注册界面

首先我们先创造两个HTML5 forms,那样我们可以利用css3进行设置,使用icon font,这个案例就是来展示如何连接两个form之间的切换。

HTML代码

<div id="container_demo" >	<!-- hidden anchor to stop jump http://www.css3create.com/Astuce-Empecher-le-scroll-avec-l-utilisation-de-target#wrap4  -->	<a class="hiddenanchor" id="toregister"></a>	<a class="hiddenanchor" id="tologin"></a>	<div id="wrapper">		<div id="login" class="animate form">			<form  action="mysuperscript.php" autocomplete="on"> 				<h1>Log in</h1> 				<p> 					<label for="username" class="uname" data-icon="u" > Your email or username </label>					<input id="username" name="username" required="required" type="text" placeholder="myusername or mymail@mail.com"/>				</p>				<p> 					<label for="password" class="youpasswd" data-icon="p"> Your password </label>					<input id="password" name="password" required="required" type="password" placeholder="eg. X8df!90EO" /> 				</p>				<p class="keeplogin"> 					<input type="checkbox" name="loginkeeping" id="loginkeeping" value="loginkeeping" /> 					<label for="loginkeeping">Keep me logged in</label>				</p>				<p class="login button"> 					<input type="submit" value="Login" /> 				</p>				<p class="change_link">					Not a member yet ?					<a href="#toregister" class="to_register">Join us</a>				</p>			</form>		</div> 		<div id="register" class="animate form">			<form  action="mysuperscript.php" autocomplete="on"> 				<h1> Sign up </h1> 				<p> 					<label for="usernamesignup" class="uname" data-icon="u">Your username</label>					<input id="usernamesignup" name="usernamesignup" required="required" type="text" placeholder="mysuperusername690" />				</p>				<p> 					<label for="emailsignup" class="youmail" data-icon="e" > Your email</label>					<input id="emailsignup" name="emailsignup" required="required" type="email" placeholder="mysupermail@mail.com"/> 				</p>				<p> 					<label for="passwordsignup" class="youpasswd" data-icon="p">Your password </label>					<input id="passwordsignup" name="passwordsignup" required="required" type="password" placeholder="eg. X8df!90EO"/>				</p>				<p> 					<label for="passwordsignup_confirm" class="youpasswd" data-icon="p">Please confirm your password </label>					<input id="passwordsignup_confirm" name="passwordsignup_confirm" required="required" type="password" placeholder="eg. X8df!90EO"/>				</p>				<p class="signin button"> 					<input type="submit" value="Sign up"/> 				</p>				<p class="change_link">  					Already a member ?					<a href="#tologin" class="to_register"> Go and log in </a>				</p>			</form>		</div>			</div></div>  


这里使用了两个小技巧:

第一个,我们利用在form前利用<a href>连接。这个小技巧可以让我们的form利用anchors很漂亮的展示出来,所以它不会让跳到长页面上当我们去点击切换链接的时候。

第二个,我们利用icon font,我们可以利用 data-attribute属性去展示这些icons。通过设置data-icon=“icon_character”在css和html中来设置这些icons。想要掌握有关于更多有关于这个的技巧,链接在这里:24 Ways: Displaying Icons with Fonts and Data- Attributes.

CSS3代码:

首先,我们给两个forms框加些普通样式

#subscribe, #login{	position: absolute;	top: 0px;	width: 88%;		padding: 18px 6% 60px 6%;	margin: 0 0 35px 0;	background: rgb(247, 247, 247);	border: 1px solid rgba(147, 184, 189,0.8);	box-shadow:			0pt 2px 5px rgba(105, 108, 109,  0.7),			0px 0px 8px 5px rgba(208, 223, 226, 0.4) inset;	border-radius: 5px;}#login{	z-index: 22;}

这里只展示了login登录框的样式,register仿写即可。

接下来我们对背景wrapper添加一些好看的样式

/**** general text styling ****/#wrapper h1{	font-size: 48px;	color: rgb(6, 106, 117);	padding: 2px 0 10px 0;	font-family: 'FranchiseRegular','Arial Narrow',Arial,sans-serif;	font-weight: bold;	text-align: center;	padding-bottom: 30px;} /** For the moment only webkit supports the background-clip:text; */#wrapper h1{	background: 	-webkit-repeating-linear-gradient(-45deg, 		rgb(18, 83, 93) , 		rgb(18, 83, 93) 20px,		rgb(64, 111, 118) 20px,		rgb(64, 111, 118) 40px,		rgb(18, 83, 93) 40px);	-webkit-text-fill-color: transparent;	-webkit-background-clip: text;} #wrapper h1:after{	content:' ';	display:block;	width:100%;	height:2px;	margin-top:10px;	background: 		linear-gradient(left,  			rgba(147,184,189,0) 0%,			rgba(147,184,189,0.8) 20%,			rgba(147,184,189,1) 53%,			rgba(147,184,189,0.8) 79%,			rgba(147,184,189,0) 100%); }

现在,给inputs也来一些漂亮的样式

/**** advanced input styling ****//* placeholder */::-webkit-input-placeholder  { 	color: rgb(190, 188, 188); 	font-style: italic;}input:-moz-placeholder,textarea:-moz-placeholder{ 	color: rgb(190, 188, 188);	font-style: italic;} input {  outline: none;}


首先,我们先对inputs做出一些样式,然后再移除outline。但是这里要小心,这个outline经常帮助用户们知道哪个输入框是当前的,所以你如果要移除outline,你应该提供一些:active and :focus状态给这个Inputs。

/* all the input except submit and checkbox */#wrapper input:not([type="checkbox"]){	width: 92%;	margin-top: 4px;	padding: 10px 5px 10px 32px;		border: 1px solid rgb(178, 178, 178);	box-sizing : content-box;	border-radius: 3px;	box-shadow: 0px 1px 4px 0px rgba(168, 168, 168, 0.6) inset;	transition: all 0.2s linear;}#wrapper input:not([type="checkbox"]):active,#wrapper input:not([type="checkbox"]):focus{	border: 1px solid rgba(91, 90, 90, 0.7);	background: rgba(238, 236, 240, 0.2);		box-shadow: 0px 1px 4px 0px rgba(168, 168, 168, 0.9) inset;} 

这里我利用了:not pseudo class,去给所有的inputs加上样式,自己也设置了a :focus and :active,因为我决定移除outline.

到了最有趣的部分了,icon font.。这里我们给label增加一个icon,利用fontomas library来充填一些漂亮的icons. 你可以安排这些icon到特定的位置。记住这个data-icon属性。

html中用户 图标部分 data-icon=’u’ ,CSS中直接利用@font-face来形成格式匹配。

@font-face {    font-family: 'FontomasCustomRegular';    src: url('fonts/fontomas-webfont.eot');    src: url('fonts/fontomas-webfont.eot?#iefix') format('embedded-opentype'),         url('fonts/fontomas-webfont.woff') format('woff'),         url('fonts/fontomas-webfont.ttf') format('truetype'),         url('fonts/fontomas-webfont.svg#FontomasCustomRegular') format('svg');    font-weight: normal;    font-style: normal;} /** the magic icon trick ! **/[data-icon]:after {    content: attr(data-icon);    font-family: 'FontomasCustomRegular';    color: rgb(106, 159, 171);    position: absolute;    left: 10px;    top: 35px;	width: 30px;}

现在设置button样式

/*styling both submit buttons */#wrapper p.button input{	width: 30%;	cursor: pointer;		background: rgb(61, 157, 179);	padding: 8px 5px;	font-family: 'BebasNeueRegular','Arial Narrow',Arial,sans-serif;	color: #fff;	font-size: 24px;		border: 1px solid rgb(28, 108, 122);		margin-bottom: 10px;		text-shadow: 0 1px 1px rgba(0, 0, 0, 0.5);	border-radius: 3px;		box-shadow:		0px 1px 6px 4px rgba(0, 0, 0, 0.07) inset,		0px 0px 0px 3px rgb(254, 254, 254),		0px 5px 3px 3px rgb(210, 210, 210);	transition: all 0.2s linear;}#wrapper p.button input:hover{	background: rgb(74, 179, 198);}#wrapper p.button input:active,#wrapper p.button input:focus{	background: rgb(40, 137, 154);	position: relative;	top: 1px;	border: 1px solid rgb(12, 76, 87);		box-shadow: 0px 1px 6px 4px rgba(0, 0, 0, 0.2) inset;}p.login.button,p.signin.button{	text-align: right;	margin: 5px 0;}


设置checkbox的样式

/* styling the checkbox "keep me logged in"*/.keeplogin{	margin-top: -5px;}.keeplogin input,.keeplogin label{	display: inline-block;	font-size: 12px;		font-style: italic;}.keeplogin input#loginkeeping{	margin-right: 5px;}.keeplogin label{	width: 80%;}


现在设置背景等样式

p.change_link{	position: absolute;	color: rgb(127, 124, 124);	left: 0px;	height: 20px;	width: 440px;	padding: 17px 30px 20px 30px;	font-size: 16px	;	text-align: right;	border-top: 1px solid rgb(219, 229, 232);	border-radius: 0 0  5px 5px;	background: rgb(225, 234, 235);	background: repeating-linear-gradient(-45deg, 	rgb(247, 247, 247) , 	rgb(247, 247, 247) 15px, 	rgb(225, 234, 235) 15px, 	rgb(225, 234, 235) 30px, 	rgb(247, 247, 247) 30px	);}#wrapper p.change_link a {	display: inline-block;	font-weight: bold;	background: rgb(247, 248, 241);	padding: 2px 6px;	color: rgb(29, 162, 193);	margin-left: 10px;	text-decoration: none;	border-radius: 4px;	border: 1px solid rgb(203, 213, 214);	transition: all 0.4s  linear;}#wrapper p.change_link a:hover {	color: rgb(57, 191, 215);	background: rgb(247, 247, 247);	border: 1px solid rgb(74, 179, 198);}#wrapper p.change_link a:active{	position: relative;	top: 1px;}

现在注意我们有两个form,我们开始做动画切换

第一件事就是隐藏第二个form

#register{		z-index: 21;	opacity: 0;}


记住r login form 是 z-index of 22?我们设置第二个form 为 z-index of 21, 为了能够在login form下边

注意切换目标,和先前设置的<a href>标签

#toregister:target ~ #wrapper #register,#tologin:target ~ #wrapper #login{	z-index: 22;	animation-name: fadeInLeft;	animation-delay: .1s;}

点击切换按钮将会触发#toregister,然后进行动画切换,是侧滑的效果。找到我们的#register元素,然后取名动画名叫做fadeInLeft,然后我们隐藏另一个form,使用0 opacity进行设置,让另一个form产生消失的效果。我们也可以让改变z-index,让它出现覆盖在这个form的上边。

.animate{	animation-duration: 0.5s;	animation-timing-function: ease;	animation-fill-mode: both;}@keyframes fadeInLeft {	0% {		opacity: 0;		transform: translateX(-20px);	}		100% {		opacity: 1;		transform: translateX(0);	}}


消失动画效果

#toregister:target ~ #wrapper #login,#tologin:target ~ #wrapper #register{	animation-name: fadeOutLeftBig;} @keyframes fadeOutLeft {	0% {		opacity: 1;		transform: translateX(0);	}		100% {		opacity: 0;		transform: translateX(-20px);	}}


翻译了个思路。哈哈。附上英文版原文链接    https://tympanus.net/codrops/2012/03/27/login-and-registration-form-with-html5-and-css3/  (这里也有demo下载)

demo下载链接:http://download.csdn.net/detail/z767327552/9748423

点这里可以跳转到人工智能网站