css怎么制作自己头像跳跃,如何用CSS制作闪烁的箭头

如何用CSS制作闪烁的箭头

阅读：9441 次   编辑日期：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*/

}

}