如何用CSS制作闪烁的箭头

目录：

概述：

随着移动端的普及，CSS3的动画效果用的越来越多，甚至很多时候PC端也在用，因为可以省去繁杂的JS，简单的CSS就能解决，今天我没来说一说如何用CSS制作闪动的箭头。

实现效果：

实现代码

    .arr{width: 10%;
        overflow: hidden;
        text-align: center;
        position: absolute;
        left: 50px;
        top:50%;
        -webkit-animation: twinkling 1s infinite ease-in-out;
    }
    .arr i{
        display: inline-block;
        width:23px;
        height:20px;
        border-width:0;
        border-right-width:2px;
        border-top-width:2px;
        border-style:solid;
        border-color:#f00;
        -o-transform: rotateZ(45deg);//旋转箭头角度
        -moz-transform:rotateZ(45deg);
        -ms-transform:rotateZ(45deg);
        -webkit-transform:rotateZ(45deg);
        transform: rotateZ(45deg);
    }
    @-webkit-keyframes twinkling{    /*透明度由0到1*/
        0%{
            opacity:0; /*透明度为0*/
        }
        100%{
            opacity:1; /*透明度为1*/
        }
    }