通过从每行底部向上滑动来显示文本

时间:2017-04-29 15:20:57

标签: javascript jquery html css

我正在尝试使用jQuery,并且遇到了一个我想要重新创建的简洁动画。 在网站https://basicagency.com/中,他们通过从每行文本的底部向上滑动来显示文本,以便不移动元素。 jQuery动画SlideDown通过向上移动整个文本块然后向下移动来显示文本,这并不能真正创建该效果。我怎么能这样做?

2 个答案:

答案 0 :(得分:0)

在jQuery中放大动画。

$('a').click(function() {
    $('#text').slideDown();
});
#container {

    position:relative;
    padding:40px;
}
#text {
    display: none;
    position: absolute;
    bottom: 0;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<a href='#'>click me</a>
<div id='container'>
<p id="text">Sample Text</p>
</div>

答案 1 :(得分:0)

此网站https://basicagency.com/使用css animate by:

转换:translate3d

过渡

有关详细信息,请参阅:CSS3 3D Transforms