箭头跳动动画效果和圆盘动画效果

　　手机端的交互体验越来越重要，因为好的体验能吸引用户的使用，提高用户的愉悦感；本文主要实现两个交互体验： 箭头跳动动画效果，就是箭头一直有一个往下的动画，吸引用户下拉操作； 圆盘动画效果，就是点击圆盘的文字项，圆盘会整个旋转，像拨号码的效果一样。

2、　　本文的实例都是由css代码实现，所以这一块是本文的重点，实现过程的详细步骤如下（主要分析跟动态效果有关的代码）：　　1.新建@keyframes规则（float），用于箭头跳动（分为11帧，，可根据实际情况修改跳动的幅度和跳动的规律）；　　2.默认状态下：　　设置动画animation（引用float），且为了让动画更逼真，配置持续时间6.5s，并无限循环（infinite）。　　3.打开网页后： 　　根据设置的动画，箭头先往下跳动两次再复原，然后往下跳动两次再复原，最后往下跳动三次再复原；这样一个规律一直循环下去。

圆盘动画效果

1、　　html代码和css样式如下图，这一块比较简单，也不是本文重点，代码可自行查看下图。　　Tips：主要注意一下文字项定位，比较麻烦。