CSS实现三角形的动画旋转

        我们在Web前端开发的时候，为了实现页面的精致效果，都会把每一个细节都处理的无可挑剔，那么今天，我就总结一下在菜单栏中经常用到的会动画旋转的三角形的用法。

        首先，我们应该先通过css设计出一个三角形。

/* 三角形 */
#Arrow{
    width:0px;
    height:0px;
    border-left: 5px solid transparent;
    border-right: 5px solid transparent;
    border-top:5px solid #fff; 
    float:left; 
}

        接下来，对该三角形添加   transition属性，该属性是指：在一定的时间内平滑地过渡，因为考虑到不同的浏览器，所以修改后的css代码如下：

#Arrow{
    width:0px;
    height:0px;
    border-left: 5px solid transparent;
    border-right: 5px solid transparent;
    border-top:5px solid #fff; 
    float:left; 
    transition:0.5s;
    -moz-transition:-moz-transform 0.5s; /* Firefox 4 */
    -webkit-transition:-webkit-transform 0.5s; /* Safari and Chrome */
    -o-transition:-o-transform 0.5s; /* Opera */
}

        然后给三角形添加 hover 事件，在鼠标放在三角形上时，让其缓慢旋转。

        让其旋转的属性 : transform

#Arrow:hover #Arrow{ 
    -moz-transform:rotateZ(180deg);
  -webkit-transform:rotateZ(180deg);
   -o-transform:rotateZ(180deg);
   transform:rotateZ(180deg);
   filter:FlipV;
}

        这样，就实现了三角形的动画旋转效果。
        

/*静止的三角形*/