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效果),这个小特效可以用于一些菜单里。
第一次发博客还不太会用这个东西,原本想截个动态图也没成功,大家谅解哈。