css3的小demo

1. css3的小demo

1.1. 用css3的旋转和动画做一个小三角箭头

1.1.1. 实现效果

1.1.1.1 默认情况

1.1.1.2 鼠标悬停效果

1.1.2. HTML代码

 <div class="wrap"></div>

1.1.3. css代码

 .wrap {
    position: relative;
    width: 200px;
    height: 50px;
    border: 1px solid #000;
    margin: 0 auto;
}

.wrap:after {
    content: "";
    position: absolute;
    top: 8px;
    right: 15px;
    width: 20px;
    height: 20px;
    border-right: 1px solid #000;
    border-bottom: 1px solid #000;
    transform: rotate(45deg);
    transition: all 0.5s;
}

.wrap:hover:after {
    transform: rotate(225deg);
}