这是我尝试重新创建的示例: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>
关于javascript - HTML 表单上的 CSS 动画,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/48093960/