将弹跳滚动箭头添加到我的网页底部？

Here是我目前的网站，问题是你应该向下滚动，但这不是很清楚，所以我想补充的是什么this网站有什么，一个小箭头，建议滚动在该div的底部。我到处寻找，但实际上找不到答案。将弹跳滚动箭头添加到我的网页底部？

来源

2015-10-27 Frank Harding

查看CSS的截面箭头。 – epascarello

@epascarello我试过看过它的代码，它真的没有帮助，我正在寻找更多的人知道如何做到这一点，而不只是复制源代码，以便他们能够解释并向我展示所有部件的。 –

使用CSS动画查看跳转代码 – epascarello

这里是你

希望你可以改变transition按您需要的demo，这里是不错的tutorial你

谢谢

来源

2015-10-27 03:50:22

您可以使用setInterval，在JavaScript，以便通过两个位置为您的箭头循环：

Example

更新：我知道这是一个老问题了，但如果有人回来吧我更新了动画中使用transform，而不是bottom，它会给你更好的性能:)

另外，如果你想，你可以设置一些简单的关键帧，并做到这一点，没有任何JavaScript！

来源

2015-10-27 03:52:55

下面是使用@keyframes和animation的解决方案。

.contentDiv'是什么<div>你想箭头在底部。只要确保它有position: relative。

HTML：

<div class="contentDiv"> 
    <img class="arrow" src="arrowImage.png" /> 
</div>

CSS：

.contentDiv { 
    position: relative; 
} 

@keyframes bouncing { 
    0% {bottom: 0;} 
    50% {bottom: 20px;} 
    100% {bottom: 0;} 
} 

.arrow { 
    animation: bouncing 1s infinite ease-in-out; 
    bottom: 0; 
    display: block; 
    height: 50px; 
    left: 50%; 
    margin-left: -25px; 
    position: absolute; 
    width: 50px; 
}

这里是一个jsFiddle例子。

来源

2015-10-27 04:56:53 flowstoneknight

这是一个很好的解决方案 – user1689274

将弹跳滚动箭头添加到我的网页底部？

回答

相关问题