最近更新
阅读排行
关注本站

如何用CSS制作闪烁的箭头

阅读:4285 次   编辑日期:2016-03-21

目录:

概述:

随着移动端的普及,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*/
        }
    }
将本篇文章分享到:
top