2d蒙版效果

2d-picture.png

当鼠标移入图片的时候，阴影层从左侧慢慢划过来。主要应用了css3的动画效果和定位

 *{margin: 0;padding: 0;}
        .box{
            width: 200px;
            height: 200px;
            position: relative;
        }
        .b1{
            width: 200px;
            height: 200px;
            background: url("img/hua1.jpg") no-repeat center;
            background-size: cover;
            position: absolute;
            z-index: 1;
            left: 0;
        }
        .b2{
            width: 200px;
            height: 200px;
            background: rgba(255,0,0,0.6);
            transition: all 3s;
            position: absolute;
            left: -200px;
            z-index: 555;
        }
        .box:hover .b2{
            transform: translateX(200px) ;
        }

<div class="box">
    <div class="b1"></div>
    <div class="b2"></div>
</div>