css3图片倒影

html:

 1 <!DOCTYPE html>
 2 <html>
 3 <head lang="en">
 4     <meta charset="UTF-8">
 5     <link rel="stylesheet" href="style.css"/>
 6     <script src="js/jquery-1.11.3.js"></script>
 7     <script src="js/inwater.js"></script>
 8     <title>图片倒影插件</title>
 9     <style>
10         #d1{
11             margin-bottom:300px;
12         }
13     </style>
14 </head>
15 <body>
16 <hr>
17     <div id="d1">
18         <img src="images/1.jpg" alt=""/>
19         <img src="images/2.jpg" alt=""/>
20         <img src="images/2.jpg" alt=""/>
21     </div>
22     <img src="images/2.jpg" alt=""/>
23     <img src="images/2.jpg" alt=""/>
24 <script>
25     inwater($('#d1'));
26 </script>
27 </body>
28 </html>

js:

1 function inwater(elem){
2        elem.children('img').each(function(i){
3            var src=$(this).attr('src');
4            $(this).wrap("<div class='inWater'></div>");
5            $(this).after('<div class="mask"><div><img src="'+src+'" alt=""/></div><div></div></div>');
6        });
7    }

css:

 1 body {
 2   margin: 50px;
 3 }
 4 .inWater {
 5   position: relative;
 6   float: left;
 7   margin-left: 20px;
 8 }
 9 .inWater > img {
10   width: 200px;
11   height: 112px;
12   transform-origin: 0 100%;
13   transform: rotateZ(0deg);
14 }
15 .inWater > .mask {
16   position: absolute;
17   transform-origin: 0 0;
18   transform: rotateX(180deg) rotateZ(0deg);
19   width: 200px;
20   height: 112px;
21   overflow: hidden;
22   top: 224px;
23   left: 0;
24   margin-top: 0px;
25 }
26 .inWater > .mask > div {
27   position: absolute;
28   top: 0;
29   left: 0;
30   width: 200px;
31   height: 112px;
32 }
33 .inWater > .mask > div:last-child {
34   background-image: linear-gradient(0deg, rgba(255, 255, 255, 0.6), #ffffff, #ffffff, #ffffff);
35 }

less:

 1 body{
 2   margin:50px;
 3 }
 4 @w:200px;@h:112px;@opacity:0.6;@RoDeg:-0deg;@margin-top:0px;@left:-20px;
 5 .inWater{
 6   position: relative;
 7   float: left;
 8   margin-left:-@left;
 9   >img{
10     width:@w;
11     height: @h;
12     transform-origin: 0 100%;
13     transform: rotateZ(@RoDeg);
14   }
15   >.mask{
16     position: absolute;
17     transform-origin: 0 0;
18     transform: rotateX(180deg) rotateZ(@RoDeg);
19     width:@w;height: @h;
20     overflow: hidden;
21     top:@h*2;
22     left:0;
23     margin-top: @margin-top;
24     >div{
25       position: absolute;
26       top:0;left:0;
27       width:@w;
28       height: @h;
29     }
30     >div:last-child{
31       background-image: linear-gradient(0deg, rgba(255,255,255,@opacity) ,#fff,#fff,#fff);
32     }
33   }
34 }

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <link rel="stylesheet" href="style.css"/>
    <script src="js/jquery-1.11.3.js"></script>
    <script src="js/inwater.js"></script>
    <title>图片倒影插件</title>
    <style>
        #d1{
            margin-bottom:300px;
        }
    </style>
</head>
<body>
<hr>
    <div id="d1">
        <img src="images/1.jpg" alt=""/>
        <img src="images/2.jpg" alt=""/>
        <img src="images/2.jpg" alt=""/>
    </div>
    <img src="images/2.jpg" alt=""/>
    <img src="images/2.jpg" alt=""/>
<script>
    inwater($('#d1'));
</script>
</body>
</html>

haley欢迎您来访本博客。此博客是作者在工作中的一个记事本，方便下次遇到同样问题时，以最快的速度解决掉遇到的问题。如果您发现哪里写的不对，欢迎给我留言，让我们一起进步。不胜感激！

相关阅读:
js 实现加入收藏/加入首页功能
 js 获取网页宽/高度
 js 飞机大战
 js 实现分享功能
 前端开发的工具，库和资源总结
 网站更新后客户端缓存问题
 js 实现图片无限横向滚动效果
 js 实现文字打印效果
 js 构造函数创建钟表
 Css3 实现关键帧动画
原文地址：https://www.cnblogs.com/haley168/p/daoying.html