前阵子在赶项目，一直没有时间写点东西。今天更新一点最近写的一些东西。
之前看到一个登陆页，一只老鹰在用户点击密码框的时候，会用手遮住自己的眼睛。当失去焦点时，老鹰又会回到最初的样子。
于是我打算用自己的头像的小花，写一个当用户点击密码框时，两片叶子能够遮住小花的眼睛，当失去焦点时小花的眼睛又露出来。
写的很简单，主要结合了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来实现动态的效果。
那就简单的分享到这里吧！
