css三角形鼠标经过旋转180度

CSS三角形鼠标经过旋转180度的效果可以通过transform属性以及:hover伪类实现。以下是代码实现：

.triangle{
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 0 10px 10px 10px;
    border-color: transparent transparent #555 transparent;
    position: relative;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    transition: transform .2s ease-in-out;
}

.triangle:hover{
    transform: translate(-50%,-50%) rotate(180deg);
} 

首先，定义一个空的div容器，设置宽高为0，然后定义三条边框，形成一个三角形。同时，为了让三角形居中显示，使用position和transform属性。

接着，设置:hover伪类，当鼠标经过时，将三角形旋转180度。由于设置了transform属性的transition过渡效果，动画会显得更加流畅。通过这种方式，可以实现鼠标经过时，三角形指向反方向的效果。