手机端 不断向上或者向下跳动的 提示箭头

手机端 不断向上或者向下跳动的 提示箭头

现在，手机端微信中经常会出现按页浏览的宣传性的页面。其中每一页的最下方会出现 向上跳动的箭头，用来提醒用户向下滑动到下一页，继续浏览。本文介绍如何用css编写这个提示箭头。动效如下图所示

模板部分和css部分如下：

<div class="arrow_up"><span></span><span></span>
</div>

.arrow_up{                   //居中position: absolute;left: 50%;bottom: 100px;color: white;
}
.arrow_up span{              //箭头形状设置position: absolute;width: 20px;height: 20px;top: 10px;-webkit-transform:rotate(45deg);border-top: 1px solid white;border-left: 1px solid white;margin-left: -10px;opacity: 0;-webkit-animation: up 2s infinite;animation: up 2s infinite;
}
.arrow_up span:nth-of-type(2){top: 20px;
}
.arrow_up span:nth-of-type(1){-webkit-animation-delay: .15s;animation-delay: .15s;
}
@-webkit-keyframes up{   //动画设置0%{opacity: 0;-webkit-transform: translate(