純CSS3登錄和注冊表單過渡動畫效果切換



151 600 201



特效描述:登錄注冊表單 過渡動畫切換 效果切換,HTML5和CSS3的登錄和注冊表格

代碼結構

1. 引入CSS

<link rel="stylesheet" type="text/css" href="css/demo.css" />
<link rel="stylesheet" type="text/css" href="css/style.css" />
<link rel="stylesheet" type="text/css" href="css/animate-custom.css" />

2. HTML代碼

<div class="codrops-demos">
	<span>點擊 <strong>"加入我們"</strong> 填寫表單</span>
	<a href="index.html" class="current-demo">Demo 1</a>
	<a href="index2.html">Demo 2</a>
	<a href="index3.html">Demo 3</a>
</div>
<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>登錄</h1> 
				<p> 
					<label for="username" class="uname" data-icon="u" >您的郵箱或用戶名</label>
					<input id="username" name="username" required="required" type="text" placeholder="myusername or [email protected]"/>
				</p>
				<p> 
					<label for="password" class="youpasswd" data-icon="p">你的密碼</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">保持登錄狀態</label>
				</p>
				<p class="login button"> 
					<input type="submit" value="登錄" /> 
				</p>
				<p class="change_link">
					不是成員?<a href="#toregister" class="to_register">加入我們</a>
				</p>
			</form>
		</div>
		<div id="register" class="animate form">
			<form  action="mysuperscript.php" autocomplete="on"> 
				<h1>注冊</h1> 
				<p> 
					<label for="usernamesignup" class="uname" data-icon="u">用戶名</label>
					<input id="usernamesignup" name="usernamesignup" required="required" type="text" placeholder="mysuperusername690" />
				</p>
				<p> 
					<label for="emailsignup" class="youmail" data-icon="e" >郵箱</label>
					<input id="emailsignup" name="emailsignup" required="required" type="email" placeholder="[email protected]"/> 
				</p>
				<p> 
					<label for="passwordsignup" class="youpasswd" data-icon="p">密碼</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">確認密碼</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="注冊"/> 
				</p>
				<p class="change_link">  
					已經是成員?<a href="#tologin" class="to_register"> 去登錄 </a>
				</p>
			</form>
		</div>
	</div>
</div>



用戶評論
大牛,別默默的看了,快登錄幫我點評一下吧!:)      登錄 | 注冊


熱門標簽: 滾動切換 滾動條切換 滑動選項卡 滑動切換 選項卡切換 選項卡 切換 tab切換 頁面切換 選項卡插件 切換插件 滑動手風琴 切換按鈕 表單 表單美化 表單插件 表單美化插件 導航切換 菜單切換 登錄框 注冊框
?
×
×

注冊

官方QQ群

掃描上面二維碼加微信群

官方QQ群

jQuery/js討論群
群號:642649996
Css3+Html5討論群
群號:322131262

加群請備注:從官網了解到

老夫子电子