带有交互动画特效的webapp登录输入密码

青春..荒唐

浏览: 963103 次
性别:

最近访客更多访客>>

lliiqiang

nbczw8750

kingkongzmc

lokily

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

博客分类：

常见特效

常见特效

带有交互动画特效的webapp登录输入密码

一个比较有创意的登录页面，当你focus密码框即将输入密码的时候，卡通人物会捂住自己的眼睛，blur的时候他就会放开手，非常可爱

<!-- HTML代码片段中请勿添加<body>标签 //-->
<form id="login-form" class="login-form">
        <div class="cartoon">
            <div id="handLeft" class="hand-left">
                <div class="hand"></div>
            </div>
            <div id="handRight" class="hand-right">
                <div class="hand"></div>
            </div>
        </div>
        <div class="it-text-list it-box">
            <div class="it-label">账号</div>
            <div class="it-input">
                <input type="text" placeholder="请输入注册手机号" name="phoneNum" id="phoneNum">
            </div>
        </div>
        <div class="it-text-list it-text-bottom it-box">
            <div class="it-label">密码</div>
            <div class="it-input">
                <input type="password" placeholder="请输入密码" name="password" id="password">
            </div>
        </div>
    </form> 
    <div class="cn-buttons">
        <div class="button bt-red">登录</div>
    </div>
 
    <div class="cn-buttons">
        <div class="button bt-white">注册</div>
    </div>
 


<!-- 推荐开源CDN来选取需引用的外部JS //-->
<script type="text/javascript" src="http://cdn.gbtags.com/jquery/1.11.1/jquery.min.js"></script>

/*CSS源代码*/
body { font: 16px/1.5 'STHeiti-Light', 'STXihei', 'HelveticaNeue', 'Helvetica', 'Simsun', Sans-serif; background: #F1F0F6; color: #333; -webkit-text-size-adjust: none; width: 100%; height: 100%; min-width: 320px; min-height: 480px; padding: 0px 0 10px 0 }
.it-box { display: -webkit-box; background-color: #FFF; font-size: 16px; position: relative }
.it-text-list { width: 100%; height: 42px; background-color: #FFF; background-image: -webkit-gradient(linear, left bottom, left top, color-stop(0.5, transparent), color-stop(0.5, #E0E0E0), to(#E0E0E0)); background-repeat: repeat-x; background-position: left top; background-size: 100% 1px; text-align: right }
.it-text-bottom { width: 100%; height: 42px; background-image: -webkit-gradient(linear, left bottom, left top, color-stop(0.5, transparent), color-stop(0.5, #E0E0E0), to(#E0E0E0)), -webkit-gradient(linear, left top, left bottom, color-stop(0.5, transparent), color-stop(0.5, #E0E0E0), to(#E0E0E0)); background-repeat: repeat-x; background-position: left top, left bottom; background-size: 100% 1px; text-align: right }

.it-text-list .it-label { margin-left: 18px; min-width: 30px; margin-right: 10px; height: 42px; text-align: left; line-height: 42px }
.it-text-list .it-line { margin-left: 18px; min-width: 20px; height: 42px; text-align: left; line-height: 42px; -webkit-box-flex: 1; }
.it-text-list .it-input { position: relative; -webkit-box-flex: 1.0; margin-right: 18px; height: 40px; line-height: 40px; padding: 1px 0 }
.it-text-list .it-input input, .it-text-list .it-input .input { position: absolute; top: 1px;bottom:0; right: 0; text-align: right; border: 0; width: 100%; background-color: #FFF }
.cn-buttons { padding: 0 18px 0 18px; height: 43px;margin:10px 0; }
.cn-buttons .button { display: block; margin: auto; height: 41px; border-radius: 3px; text-align: center; line-height: 41px; font-size: 16px; }
.cn-buttons .button a { display: inline-block; width: 100%; height: 100%; color: inherit }
.cn-buttons .bt-red { background-color: #DF3031; color: #FFF; border: 1px solid #DF3031 }
.cn-buttons .bt-white { background-color: #FFF; border: 1px solid #CCC }
.login-form { position: relative; display: block; margin: 180px 18px 30px; border-radius: 10px; box-shadow: 0 3px 5px #DDD; background: #FFF }
.login-form .it-text-list { background-image: none; }
.login-form .it-text-bottom { background-image: -webkit-gradient(linear, left bottom, left top, color-stop(0.5, transparent), color-stop(0.5, #E0E0E0), to(#E0E0E0)) }
.login-form .cartoon { position: absolute; top: -110px; left: 50%; margin-left: -77px; width: 155px; height: 110px; background: url("http://xfw8.sinaapp.com/webapp/static/mobile/image/cartoon-head.png") no-repeat center center; background-size: 155px; }
.login-form .cartoon .hand-left { position: absolute; left: -10px; bottom: -50px; width: 37px; height: 50px; background: url("http://xfw8.sinaapp.com/webapp/static/mobile/image/cartoon-hand-left.png") no-repeat center center; background-size: 37px; }
.login-form .cartoon .hand-right { position: absolute; right: -10px; bottom: -50px; width: 37px; height: 50px; background: url("http://xfw8.sinaapp.com/webapp/static/mobile/image/cartoon-hand-right.png") no-repeat center center; background-size: 37px; }
.login-form .cartoon .hand { position: absolute; z-index: 1; top: -10px; right: 0; width: 25px; height: 15px; background: #FCC4A9; border-radius: 100%; }
.login-form .cartoon .hand-right .hand { right: auto; left: 0; }

/*Javascript代码片段*/
$(".it-input input[type=password]").on("focus", function () {
        $(".hand").hide();
        $("#handLeft").animate({bottom: 0, left: 10});
        $("#handRight").animate({bottom: 0, right: 10});
    }).on("blur", function () {
        $("#handLeft").animate({bottom: -50, left: -10});
        $("#handRight").animate({bottom: -50, right: -10}, function () {
            $(".hand").show();
        });
    });

分享到：

cilp-path学习笔录 | 多种方案实现 CSS 斜线

2018-02-17 19:29
浏览 1109
评论(0)
分类:Web前端
查看更多

发表评论

您还没有登录,请您登录后再发表评论

最近访客更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论

带有交互动画特效的webapp登录输入密码

评论

发表评论

相关推荐

最近访客 更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论

带有交互动画特效的webapp登录输入密码

评论

发表评论

相关推荐

原生JS无缝轮播

浅谈锚点跳转优先级

返回顶部的几种方案

弹性盒模型（2）------Flex容器元素

弹性盒模型（1）------Flex布局对子元素影响

纯JS实现点击区域外隐藏元素

CSS优化单选多选按钮样式（2）

浅谈获取html元素宽高的两种方式-offsetWidth和width的区别

浅谈原生JS实现二级导航（优缺点与局限性）

浅谈jQuery实现二级导航（优缺点与局限性）

浅谈纯CSS实现二级导航（优缺点与局限性）

纯CSS实现半圆、1/4圆

CSS优化单选多选按钮样式（1）

原生JS实现瀑布流效果

jquery插件——仿新浪微博限制输入字数的textarea

CSS实现文字竖向排版

纯JS代码完成表格增删改查

css修改滚动条默认样式

用Javascript实现回到顶部效果

CSS3实现模糊背景的原理

最近访客更多访客>>