192.168.1.1-路由器设置 | 192.168.0.1-无线路由器设置

一个很可爱的登录界面带来的灵感

发布时间:2015-08-02 10:32

 前阵子在赶一个IT项目,一直没有时间写点东西。今天更新一点最近写的一些东西。

 
之前看到一个路由器设置的登陆页面,一只老鹰在用户点击密码框的时候,会用手遮住自己的眼睛。当失去焦点时,老鹰又会回到最初的样子。
 
于是我打算用自己的头像的小花,写一个当用户点击密码框时,两片叶子能够遮住小花的眼睛,当失去焦点时小花的眼睛又露出来。
 
写的很简单,主要结合了js还有css3的效果。
效果就是下面展示的这样。
 
我的思路是,当我对密码框触发了onfocus事件时,给小花还有叶子增加一个class名,这个class名改变了小花的位置,当我对密码框出发了onblur事件时,把小花还有叶子的class名remove掉。
 
小花的脸和身体的效果其实很简单,就是向下移动
下面是小花原来的CSS
 
#flower{      
    top:100px;                     /* 控制高度 */
    transition: top 1s;          
    -moz-transition: top 1s;    /* 兼容火狐的css3 */
    -webkit-transition: top 1s;    /* 兼容Safari 和 Chrome的css3*/
    -o-transition: top 1s;    /* 兼容Opera的css3 */
}
 
W3C标准中对CSS3的transition是这样描述的:“CSS的transition允许CSS的属性值在一定的时间区间内平滑地过渡。这种效果可以在鼠标单击、获得焦点、被点击或对元素任何改变中触发,并圆滑地以动画效果改变CSS的属性值。”
 
增加了move class名的小花的CSS top值变大
 
#flower.move{
    top:140px;
}
 
两片叶子的效果稍许有点复杂
下面是左边的叶子和右边的叶子原来的样式
 
#l-g, #r-g{
    width: 70px;
    top:194px;
    transition: 1s;
    -moz-transition:1s;    /* 兼容Firefox 4的css3 */
    -webkit-transition:1s;    /* 兼容Safari 和 Chrome 的css3*/
    -o-transition: 1s;    /* 兼容Opera 的css3*/
 
}
#l-g{
    margin-left: -70px;
}
下面是当触发了密码框onfocus事件 两片叶子的样式
 
#l-g.move{
    margin-left: -39px;
    transform:rotate(106deg);
    -ms-transform:rotate(106deg); /* Internet Explorer */
    -moz-transform:rotate(106deg); /* Firefox */
    -webkit-transform:rotate(106deg); /* Safari 和 Chrome */
    -o-transform:rotate(106deg); /* Opera */
}
#r-g.move{
    margin-left: -39px;
    transform:rotate(-96deg);
    -ms-transform:rotate(-96deg); /* Internet Explorer */
    -moz-transform:rotate(-96deg); /* Firefox */
    -webkit-transform:rotate(-96deg); /* Safari 和 Chrome */
    -o-transform:rotate(-96deg); /* Opera */
}
因为叶子需要旋转,所以使用了css3的rotate属性值 在旋转的过程中,还要调整叶子的左右位置,否则叶子就在原地旋转了!而不是遮住了花的眼睛!!!
 
把css写好之后,js的内容非常简单,只要添加class和移除class就行了!
 
            var psw = document.forms[0].elements[1];
            var img_f = document.getElementById('flower');
            var img_l_g = document.getElementById('l-g');
            var img_r_g = document.getElementById('r-g');
 
            //动画效果
            psw.onfocus = function(){
                var psw_value = this.value;
                 
                img_f.setAttribute('class','move');
                img_l_g.setAttribute('class','move');
                img_r_g.setAttribute('class','move');
 
            }
 
            psw.onblur = function (){
                img_f.removeAttribute('class','move');
                img_l_g.removeAttribute('class','move');
                img_r_g.removeAttribute('class','move');
            }
这次写的东西还是比较简单的,如果用jQuery的话 可以使用animate来实现动态的效果。
 
那就简单的分享到这里吧!
  • 上一篇:VMware Workstation 里创建CentOS的教程文档
  • 下一篇:没有了
  • 关于我们 - RSS地图 - 最近更新 - 友情链接 - 网站地图 - 版权声明