CSS动画在html表单上
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了CSS动画在html表单上相关的知识，希望对你有一定的参考价值。
这是我想要重新创建的一个例子：https://www.hioscar.com/get-quote/
- 当用户将信息输入输入区域或选择一个选项时，当前行将设置动画（我相信使用翻译和不透明度），下一行将进入视图。
我已经开始了一些非常基础的东西，只是为了了解它在悬停时的工作方式，但我不确定如何以我自己的形式完成复制这个动画。
div
margin-top: 500px;
div:hover
transform: translate(0px, -300px);
opacity: 0.3;
transition: opacity 0.05s linear;
<div>
<p>Hello, I am a very basic example</p>
</div>答案
所以你有几个问题，你只是动画不透明度，如果你悬停它时从鼠标光标下移动div，它将无法正常工作。
所以我激活了所有过渡，而不仅仅是不透明度，使div与浏览器一样高，并使用了div的内部填充。
body, html
/* needed so that the div can also be 100% of window */
height: 100%;
div
height: 100%;
padding-top: 500px;
div:hover
padding-top: 300px;
transition: all 0.05s linear;
<div>
<p>Hello, I am a very basic example</p>
</div>以上是关于CSS动画在html表单上的主要内容，如果未能解决你的问题，请参考以下文章
html 使用CSS3和jQuery翻转动画登录和SignUp表单http://talkerscode.com/webtricks/animated-login-and-signup-form-wit