特效描述:利用jQ css3实现 注册步骤 动画效果,利用jQ css3实现注册步骤动画效果
代码结构
1. 引入CSS
<link rel="stylesheet" media="screen" href="css/zzsc.css" /> <link rel="stylesheet" media="screen" href="css/zzsc.css" />
2. 引入JS
<script src="http://thecodeplayer.com/uploads/js/jquery-1.9.1.min.js" type="text/javascript"></script> <script src="http://thecodeplayer.com/uploads/js/jquery.easing.min.js" type="text/javascript"></script> <script src="js/zzsc.js" type="text/javascript"></script> <script src="http://thecodeplayer.com/uploads/js/jquery-1.9.1.min.js" type="text/javascript"></script> <script src="http://thecodeplayer.com/uploads/js/jquery.easing.min.js" type="text/javascript"></script> <script src="js/zzsc.js" type="text/javascript"></script>
3. HTML代码
<html> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312"> <title></title> </head> <form id="msform"> <!-- progressbar --> <ul id="progressbar"> <li class="active">Account Setup</li> <li>Social Profiles</li> <li>Personal Details</li> </ul> <!-- fieldsets --> <fieldset> <h2 class="fs-title">Create your account</h2> <h3 class="fs-subtitle">This is step 1</h3> <input type="text" name="email" placeholder="Email" /> <input type="password" name="pass" placeholder="Password" /> <input type="password" name="cpass" placeholder="Confirm Password" /> <input type="button" name="next" class="next action-button" value="Next" /> </fieldset> <fieldset> <h2 class="fs-title">Social Profiles</h2> <h3 class="fs-subtitle">Your presence on the social network</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="Previous" /> <input type="button" name="next" class="next action-button" value="Next" /> </fieldset> <fieldset> <h2 class="fs-title">Personal Details</h2> <h3 class="fs-subtitle">We will never sell it</h3> <input type="text" name="fname" placeholder="First Name" /> <input type="text" name="lname" placeholder="Last Name" /> <input type="text" name="phone" placeholder="Phone" /> <textarea name="address" placeholder="Address"></textarea> <input type="button" name="previous" class="previous action-button" value="Previous" /> <input type="submit" name="submit" class="submit action-button" value="Submit" /> </fieldset> </form> <br><br><br><br><br><br><br><br><br><br> <br><br><br><br><br><br><br><br><br><br> <div style="text-align:center;clear:both"> </div> </body> </html>