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

4月23日 · 2016年

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

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

 

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

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

7 条回应
验证码
输入运算符及数字使等式成立
{{comment.validate_num1}} = {{comment.validate_num2}}
点赞确定
退出登录?
取消 确定
  1. Tatsumi2016-11-28 · 17:44

    映像中这个效果几年前见过,记不起是在哪里了。

  2. Iopafeopt2016-11-26 · 7:40

    Ugireojfe whfiwehfjwehwhfjehfwefhweh 777uiop fweh iwehf weiohf wieohf iwehf iweyu59tu328hfire iuwfodhqw934785 h3urh9wjfwgut h9wh9889wh98r h4wt93qrj29th2 rj2ghw9tfq.

  3. cyy2016-6-26 · 16:37

    [023阳光] tinghaode

  4. 夏娜酱拌饭2016-5-28 · 3:16

    作为研究用还是不错的,但是如果真的有哪个登录框动效做成这样,那就太繁复,太反人类了…
    对于抖动的象征意义,我觉得用于输错密码后,密码框抖动并清空密码,这样比较符合人的思维
    如果一个提交按钮在抖,根本不知道这是在干嘛

    • Panda2016-5-28 · 10:59

      本来就是输不对密码才会抖动呀,反正你又不知道我的密码……而且我又不让你注册。所以你点的时候不管怎么样都会抖动。

  5. 腾腾2016-4-23 · 21:30

    漂亮极了!

    • Panda2016-4-24 · 9:39

      ❤️