图片中间有条渐变的白块,主要是css3的新属性线性渐变的功劳(linear-gradient),附上css样式表
<style> .pic-wrap{ width: 100%; position: relative; overflow: hidden; } .pic-wrap img{ width: 100%; height: 300px; } .pic-wrap:before{ content: ""; position: absolute; width: 200px; height: 100%; top: 0; left: -250px; 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, right top, 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); } .pic-wrap:hover:before{ left: 150%; transition: left 2s ease 0s; } </style>
我这里是插了一张图片,你也可以用背景图
<div class="pic-wrap"> <img src="img/bg.jpg" alt="">
</div>