css - 如何使登录 div 像这样轻松进入和弹跳?

标签 css animation

登录框从顶部飞起,输入字段随之动画,直到弹跳结束。我觉得这很酷。

我想知道如何制作这样的效果。我认为这是 CSS3 动画。是否有任何插件或库?

http://themeforest.net/item/katniss-premium-admin-template/full_screen_preview/3878281

最佳答案

如果您正在寻找快速解决方案,您可以使用animation: bounceY 0.9s linear;

或者

您可以像这样使用自定义三次贝塞尔曲线过渡:

-webkit-transition: all 0.5s cubic-bezier(.21,-1,.48,2);
        transition: all 0.5s cubic-bezier(.21,-1,.48,2);

此处演示 jsfiddle 。只需将鼠标悬停在后面的 div 上即可。

您可以更改和调整效果,直到获得恰到好处的效果!

关于css - 如何使登录 div 像这样轻松进入和弹跳?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/20755278/

相关文章:

html菜单栏无法添加子菜单

jquery - 使我的菜单适应响应式菜单

jquery - 滚动到页面的特定部分时如何触发动画?

javascript - 使用 Electron 时,设计 HTML/CSS 布局的最佳方式是什么?

jQuery:关闭打开的内容,打开关闭的内容

css - 我怎样才能使用同一个 spritesheet 在同一个页面上有多个 css 动画?

ios - 满足条件时 SwiftUI 动画背景颜色变化

android - 在 View 上显示图像

flutter - 我想为 ListView 中的每个特定项目创建动画

html - 在 CSS3 中逐步绘制虚线 - 动画