网页登录框动画效果的实现

见过很多动图,大都叫“攻城尸追着砍系列”。因此,作为一具“射鸡尸”,要想不被追着砍,还是自己来实现一些动效吧!主要动态效果包括:“添加”按钮和对话框颜色的变化效果,还有“提交”按钮的“抖动”效果。

实现的时候动画是用的CSS3的Animation,因此要能显示效果必须使用“真正的”浏览器。(老旧的IE系列是不行的)可正常显示的最新版浏览器包括但不限于:Safari、Firefox、Microsoft Edge。

 

实现时的问题主要在于如何解决右上角的“添加”按钮在放大后刚好覆盖到对话框的问题。我的解决办法如下:
1、把“添加”按钮写为“对话框”的子类
2、添加按钮的位置样式要“position:absolute”,就可以弄到父类的外面了
3、用Javascript控制“添加”按钮的位置,动态移动到中间后(放大前),将父类“对话框”的样式“overflow”属性改为“hidden”
4、“添加”按钮的圆形放大之后就刚好覆盖到“对话框”上了

点下面的链接来亲自试验: