css3图片倒影
Posted WEB前端--haley
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了css3图片倒影相关的知识，希望对你有一定的参考价值。
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>
以上是关于css3图片倒影的主要内容，如果未能解决你的问题，请参考以下文章