css 3 이미지 스 쳐 지나 가기

css 3 는 매우 강력 한 것 입 니 다. 마우스 가 그림 을 옮 길 때 반 짝 이 는 효 과 를 실현 하려 면 예 를 들 어http://www.fenqile.com/product/mobile/list.html。
구체 적 인 코드 는 다음 과 같다.

<div class="img_wrap">

    <img src="images/1.jpg" alt="" />

    <em></em>

</div>



<style type="text/css">



.img_wrap  em {

    background-image: linear-gradient(0deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.4), rgba(255, 255, 255, 0));

    height: 280px;

    left: -320px;

    position: absolute;

    top: 0;

    transform: skewX(-25deg);

    width: 280px;

}



.img_wrap:hover  em  {

    left: 280px;

    transition: all 0.5s ease 0s;

}

</style>