Html
    Css
    Js
/*广告图片效果*/
div {
	position:relative;
	height:450px;
	width:330px;
	left:150px;
	top:0;
	overflow:hidden;
}
div a {
	display:block;
}
a:hover::before {
	left:400px;
	transition:left 1s ease 0s;
}
div a::before {
	content:"";
	position:absolute;
	width:80px;
	height:450px;
	top:0;
	left:-150px;
	overflow:hidden;
	background:-moz-linear-gradient(left,rgba(255,255,255,0)0,rgba(255,255,255,.2)50%,rgba(255,255,255,0)100%);
	background:-webkit-gradient(linear,left top,righttop,color-stop(0%,rgba(255,255,255,0)),color-stop(50%,rgba(255,255,255,.2)),color-stop(100%,rgba(255,255,255,0)));
	background:-webkit-linear-gradient(left,rgba(255,255,255,0)0,rgba(255,255,255,.2)50%,rgba(255,255,255,0)100%);
	background:-o-linear-gradient(left,rgba(255,255,255,0)0,rgba(255,255,255,.2)50%,rgba(255,255,255,0)100%);
	-webkit-transform:skewX(-25deg);
	-moz-transform:skewX(-25deg);
	-o-transform:skewX(-25deg);
}

                        
↑上面代码改变,会自动显示代码结果 jQuery调用版本:1.11.3
 立即下载

仿京东鼠标经过高光

0