CSS3制作鼠标经过三角形旋转

在线演示

html:

<div id="box"></div>

css:

#box {    margin: 100px auto;    width: 0;    height: 0;    border: 30px solid transparent;/*三角形宽30px 边框都为透明*/    border-top-color: red;/*顶部边框为红色*/    border-bottom: none;/*底部去掉边框*/    transition: all 1s ease 0s;/*all是所有属性都将获得动画效果  1秒玩完成动画 ease(逐渐变慢)*/}#box:hover {    transform: rotate(180deg);/*旋转180度*/}