<div class="img1 alt=""></div>
<div class="img2 alt=""></div>
...
*{
padding: 0;
margin: 0;
}
div{
display: block;
width: 500px;
height: 281px;
background: url('./600-31080.png');
}
添加样式,transform
旋转
.img2{
transform: scaleY(-1);
}
设置渐变,不能直接在img2
上面添加样式了,必须用另外一个层来盖在上面,所以我们就用伪元素来处理这个效果
.img2:before{
content: '';
display: block;
width: 100%;
height: 100%;
transform: scaleY(-1);
background-image: -webkit-gradient(
linear,
left bottom,
left top,
color-stop(0.2, rgb(255,255,255)),
color-stop(1, rgba(255,255,255,0.3))
);
}
倒影和原图增加立体感,我们可以使倒影图倾斜一个角度,css3中,提供transform: skew(30deg))
, 30deg是角度。由于倾斜,所以需要向右位移一下margin-left
。
.img2{
transform: scaleY(-1) skew(-30deg);
margin-left: 81px;
}
是不是发现,实现上面和PC一致,不过一个是用代码实现的,一个只需要点击操作就OK,原理一样。
主要通过transform
的scale
、skew
属性,和背景gradient
渐变实现图片倒影渐变效果。