CSS3实现美美哒的图片倒影效果
基础结构 - 第一步
<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');
}
CSS3实现美美哒的图片倒影效果
旋转图片 - 第二步
添加样式，transform 旋转
.img2{
transform: scaleY(-1);
}CSS3实现美美哒的图片倒影效果
渐变 - 第三步
设置渐变，不能直接在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实现美美哒的图片倒影效果
拓展
倒影和原图增加立体感，我们可以使倒影图倾斜一个角度，css3中，提供transform: skew(30deg)), 30deg是角度。由于倾斜，所以需要向右位移一下margin-left。
.img2{
transform: scaleY(-1) skew(-30deg);
margin-left: 81px;
}CSS3实现美美哒的图片倒影效果
总结
是不是发现，实现上面和PC一致，不过一个是用代码实现的，一个只需要点击操作就OK，原理一样。
主要通过transform的scale、skew属性，和背景gradient渐变实现图片倒影渐变效果。
本文参与 腾讯云自媒体分享计划，分享自作者个人站点/博客。
原始发表：2018年12月26日，如有侵权请联系 cloudcommunity@tencent.com 删除
评论
登录后参与评论
推荐阅读
目录