本案例主要实现箭头自相向上滑动，同时变大变透明的效果。一般在手机端起到引导用户向上滑动页面的作用。
大概思路就是用到css3动画，动画分解成三个部分：1、位移，2、缩放，3、透明度变换。
位移就是bottom或者top、left、right的变化，缩放就是width，height，透明度自然是 opacity。
箭头样式就不写了，主要写 animation代码。
.jiantou {
-webkit-animation: jiantou 1.5s infinite;// infinite ，大概是循环执行的意思。
}
@-webkit-keyframes jiantou {
from{
bottom: 5%;
left:45%;
width: 10vw;
height: 4vw;
background-size: 100vw 700vw;
background-position: -89vw 0vw;
opacity:1;
}
to {
bottom: 10%;
left:43%;//left给了百分之一的位移是因为箭头放大的时候如果不给个横向位移量的话，会形成箭头放大同时又偏移的视觉效果。
width: 15vw;//vw是计量单位，具体用法百度吧。
height: 6vw;
background-size: 150vw 1050vw;//因为我的箭头图片是以背景图展现的，所以用到了 background-size ，如果用img，自然可以用width直接来控制
background-position: -133.5vw 0vw;
opacity:0;//透明度~
}
}
未经允许不得转载：前端撸码笔记 » css3 animation 制作闪烁的箭头