浙江 杭州

html5和css3登录注册表单界面切换动画

系统分类: 网页特效 - jquery插件 - jQuery表单及相关 2015-07-20

人气21560

亲们该页面内会员们分享的“作品”,版权为才华横溢的原作者们所有滴,不得商业使用!


这是一款使用html5和css3制作的用户登录界面和注册表单界面相互切换的动画效果。这个登录注册表单界面切换共3种效果:淡入淡出、快速移动和放大缩小效果。

这是一款使用html5和css3 伪类:target制作的登录界面和注册表单界面切换动画。

HTML

html结构包含两个表单:登录表单和注册表单。开始时使用css将注册表单隐藏。

<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="" 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="" 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> 
                

这里的输入框使用了一些html5的新东西。密码框的type=password使用户输入的字符自动替换为小圆点。type=email能够自动检测用户输入的email地址是否为合法。require=required可以对表单进行非空判断,当用户没有填写内容时会阻止提交表单。autocomplete=on将根据用户以前填写的内容来中的补全表单。

现在有两个表单,你会发现在第一个表单的最上部有两个超链接。这是一个实用的小技巧,它可以保证我们在点击链接进行表单切换时不会切换到另一个页面上去。

这个demo中的第二个小技巧是字体图标的使用方法。这里将使用 data-attribute 来显示字体图标。通过设置data-icon=”icon_character”,我们只需要一个css属性选择器就可以给所有的图标设置样式。关于此内容请参考: 24 Ways: Displaying Icons with Fonts and Data- Attributes

注意:某些浏览器不支持background-clip: text属性,IE8级以下的IE浏览器不支持 :target伪类,IE9不支持css transitions和animations。

css代码请参考下载文件。

查看演示
下载资源:9
下载资源
错误提交:

格式:zip 大小:140.29KB

================关于优设记================
“优设记ui3g.com“是国内最全jquery插件下载 - 高质量网页素材的学习下载平台
资源微博:同步网站更新内容,订阅jquery资源 @吐槽优设记,欢迎关注获取网页设计资源、下载顶尖设计素材。
文章链接: http://www.ui3g.com/code/uicode-1157.html 非特殊说明,本文版权归原作者所有,转载请注明出处
html5和css3登录注册表单界面切换动画

我当前G币余额:0 已下载次数:9

注:购买该插件的用户当日可免费下载 插件作者可永久免费下载

所需G币:20

下载提示:由于文件较小,请直接点击下载,不支持迅雷等下载工具。

抱歉 G币 不足,你可以通过 上传PSD & jquery 充值 获得G币

多一点耐心少一点浮躁有什么新鲜事想告诉大家? 分享有礼 +5G币:(已有4 评论)