css鼠标划过时的一些小特效

css部分-----------

.div1{
    width: 100px;
    height: 100px;
    border: 1px solid;
    position: relative;
    background-color: #fff;      
    transition: width 2s;       /*划过时的颜色推送的时间*/
    overflow: hidden;           /*隐藏多余的：before，让它只占满div1*/
    z-index: 2;
}
.div1:before{
    content: '';
    position: absolute;
    left: -240px;   
    top: 0px;
    width: 100px;
    height: 100px;
    background: #629feb;
    z-index: 1;
    transition: width 2s;
    transform: skew(30deg, 0);      /*让它是斜着划过去，好看一些*
}
.div1:hover:before{
    width: 1000px;
}

body部分-------

<div class="div1">

</div>

上面的transform和transition都没有适配浏览器，

-moz-transition: width 2s;
-webkit-transition: width 2s;
-o-transition: width 2s;

-webkit-transform: skew(30deg, 0);
-ms-transform: skew(30deg, 0);
-moz-transform: skew(30deg, 0);

-o-transform: skew(30deg, 0);

先给出一个div1的盒子，再给div1添加一个伪元素，当鼠标划在div1上时，

因为hover会触发伪元素的效果（这里不是dom效果），这个小特效可以用于一些菜单里。

第一次发博客还不太会用这个东西，原本想截个动态图也没成功，大家谅解哈。