这是一款效果非常时尚大方的jQuery和CSS3手机聊天框界面动画特效。该聊天框界面适合用于各类手机APP的聊天界面布局。当用户选择某个头像的时候,该头像会放大移动到屏幕的上方,并显示与该用户的聊天记录。
制作方法
HTML结构
该聊天框界面使用嵌套
Miro Badev
mirobadev@gmail.com
Miro Badev 该聊天框特效的动画效果主要使用CSS3 transition配以合适的easing效果和 jQuery代码主要用于处理搜索框的聚焦事件,以及用户点击聊天框中的头像时,为相应的元素添加和移除相应的class。并且使用.friend
代表一个朋友。最底部使用div#search来制作一个搜索框效果。
cubic-bezier
函数。animate
函数和fadeIn
、fadeOut
函数制作头像的移动动画及淡入淡出的效果。
版权声明
版权说明: 仅限用于学习和研究目的;不得将上述内容用于商业和非法用途!否则一切后果自负。我们非常重视版权问题,如有侵权请邮件至(171373236#qq.com)与我们联系处理,敬请谅解!