css3注册分步骤动画效果

查看演示 下载资源 下载积分： 50 积分

关注公众号，免费赠送安装视频教程、环境和学习视频，后面会不断更新。

<form id="msform">
	<!-- progressbar -->
	<ul id="progressbar">
		<li class="active">登录账号</li>
		<li>网络社交</li>
		<li>基本信息</li>
	</ul>
	<!-- fieldsets -->
	<fieldset>
		<h2 class="fs-title">登录账号</h2>
		<h3 class="fs-subtitle">填写您用于登录的账号</h3>
		<input type="text" name="email" placeholder="邮箱" />
		<input type="password" name="pass" placeholder="密码" />
		<input type="password" name="cpass" placeholder="确认密码" />
		<input type="button" name="next" class="next action-button" value="下一步" />
	</fieldset>
	<fieldset>
		<h2 class="fs-title">网络社交</h2>
		<h3 class="fs-subtitle">您的网络社交账号</h3>
		<input type="text" name="twitter" placeholder="Twitter" />
		<input type="text" name="facebook" placeholder="Facebook" />
		<input type="text" name="gplus" placeholder="Google Plus" />
		<input type="button" name="previous" class="previous action-button" value="上一步" />
		<input type="button" name="next" class="next action-button" value="下一步" />
	</fieldset>
	<fieldset>
		<h2 class="fs-title">基本信息</h2>
		<h3 class="fs-subtitle">填写您的基本信息</h3>
		<input type="text" name="fname" placeholder="昵称" />
		<input type="text" name="lname" placeholder="年龄" />
		<input type="text" name="phone" placeholder="手机" />
		<textarea name="address" placeholder="地址"></textarea>
		<input type="button" name="previous" class="previous action-button" value="上一步" />
		<input type="submit" name="submit" class="submit action-button" value="完成" />
	</fieldset>
</form>