仿天猫商品品牌图片墙换一批动画特效

http://www.w2bc.com/article/201229
不同尺寸的占位符只是说明换了图片

<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <title>Document</title> <link href="http://cdn.bootcss.com/normalize/5.0.0/normalize.css" rel="stylesheet"> <style type="text/css"> @charset "utf-8"; body{ font-family: Arial, "Microsoft YaHei UI Light"; } /*一、24格处理*/ #iconWall{ width: 732px; background-color: #f0f0f0; margin: 0 auto; overflow: hidden; padding-top: 1px; padding-left: 1px; list-style: none; } #iconWall li{ width: 121px; height: 108px; /*background-color: #fff;*/ float: left; margin-right: 1px; margin-bottom: 1px; position: relative; } /*二、3D反转区域处理 */ .img-back, .img-front{ position: absolute; left: 0; top: 0; background-color: #fff; width: 121px; height: 108px; text-align: center; line-height: 108px; } li img{ vertical-align: middle; } .img-3d{ transform-style: preserve-3d; } .img-back{ transform: rotateY(180deg); } /*测试代码*/ /*li:hover .img-3d{*/ /*transition: .3s linear;*/ /*transform: rotateY(180deg);*/ /*}*/ /*三、换一批*/ #btnRefresh{ text-align: center; transition: .3s linear; background-color: #fff; } .iconRefresh{ width: 28px; height: 28px; background: url("http://placehold.it/28x28"); margin: 32px auto 0; } #btnRefresh:hover{ color: #fff; background-color: #dd2727; transition: 0s; } #btnRefresh:hover .iconRefresh{ background: url("../img/refresh-white.png"); } /*四、处理浮层*/ .mask{ position: absolute; left: 0; top: 0; width: 121px; height: 108px; background-color: rgba(0, 0, 0, .7); opacity: 0; } .mask img{ float: right; margin-top: 8px; margin-right: 8px; } .mask p{ font-size: 12px; color: #fff; margin-top: 45px; text-align: center; } .mask a{ color: #fff; text-decoration: none; font-size: 12px; background-color: red; width: 70px; display: block; margin: 0 auto; text-align: center; height: 18px; line-height: 18px; border-radius: 9px; } li:hover .mask{ opacity: 1; transition: .3s linear; } /*页脚*/ footer{ text-align: center; margin-top: 20px; color: #666; font-size: 16px; line-height: 1.4; } </style> </head> <body> <div class="gzui-container" style="margin-top:100px;"> <div class="gzui-content"> <ul id="iconWall"> <li> <div class="img-3d"> <div class="img-back"> <img src="http://placehold.it/100x50" alt=""> </div> <div class="img-front"> <img src="http://placehold.it/100x40" alt=""> </div> </div> <div class="mask"> <img src="http://placehold.it/20x24" alt=""> <p>关注人数 323.4万</p> <a href="javascript:">点击进入</a> </div> </li> <li> <div class="img-3d"> <div class="img-back"> <img src="http://placehold.it/100x50" alt=""> </div> <div class="img-front"> <img src="http://placehold.it/100x40" alt=""> </div> </div> <div class="mask"> <img src="http://placehold.it/20x24" alt=""> <p>关注人数 323.4万</p> <a href="javascript:">点击进入</a> </div> </li> <li> <div class="img-3d"> <div class="img-back"> <img src="http://placehold.it/100x50" alt=""> </div> <div class="img-front"> <img src="http://placehold.it/100x40" alt=""> </div> </div> <div class="mask"> <img src="http://placehold.it/20x24" alt=""> <p>关注人数 323.4万</p> <a href="javascript:">点击进入</a> </div> </li> <li> <div class="img-3d"> <div class="img-back"> <img src="http://placehold.it/100x50" alt=""> </div> <div class="img-front"> <img src="http://placehold.it/100x40" alt=""> </div> </div> <div class="mask"> <img src="http://placehold.it/20x24" alt=""> <p>关注人数 323.4万</p> <a href="javascript:">点击进入</a> </div> </li> <li> <div class="img-3d"> <div class="img-back"> <img src="http://placehold.it/100x50" alt=""> </div> <div class="img-front"> <img src="http://placehold.it/100x40" alt=""> </div> </div> <div class="mask"> <img src="http://placehold.it/20x24" alt=""> <p>关注人数 323.4万</p> <a href="javascript:">点击进入</a> </div> </li> <li> <div class="img-3d"> <div class="img-back"> <img src="http://placehold.it/100x50" alt=""> </div> <div class="img-front"> <img src="http://placehold.it/100x40" alt=""> </div> </div> <div class="mask"> <img src="http://placehold.it/20x24" alt=""> <p>关注人数 323.4万</p> <a href="javascript:">点击进入</a> </div> </li> <li> <div class="img-3d"> <div class="img-back"> <img src="http://placehold.it/100x50" alt=""> </div> <div class="img-front"> <img src="http://placehold.it/100x40" alt=""> </div> </div> <div class="mask"> <img src="http://placehold.it/20x24" alt=""> <p>关注人数 323.4万</p> <a href="javascript:">点击进入</a> </div> </li> <li> <div class="img-3d"> <div class="img-back"> <img src="http://placehold.it/100x50" alt=""> </div> <div class="img-front"> <img src="http://placehold.it/100x40" alt=""> </div> </div> <div class="mask"> <img src="http://placehold.it/20x24" alt=""> <p>关注人数 323.4万</p> <a href="javascript:">点击进入</a> </div> </li> <li> <div class="img-3d"> <div class="img-back"> <img src="http://placehold.it/100x50" alt=""> </div> <div class="img-front"> <img src="http://placehold.it/100x40" alt=""> </div> </div> <div class="mask"> <img src="http://placehold.it/20x24" alt=""> <p>关注人数 323.4万</p> <a href="javascript:">点击进入</a> </div> </li> <li> <div class="img-3d"> <div class="img-back"> <img src="http://placehold.it/100x50" alt=""> </div> <div class="img-front"> <img src="http://placehold.it/100x40" alt=""> </div> </div> <div class="mask"> <img src="http://placehold.it/20x24" alt=""> <p>关注人数 323.4万</p> <a href="javascript:">点击进入</a> </div> </li> <li> <div class="img-3d"> <div class="img-back"> <img src="http://placehold.it/100x50" alt=""> </div> <div class="img-front"> <img src="http://placehold.it/100x40" alt=""> </div> </div> <div class="mask"> <img src="http://placehold.it/20x24" alt=""> <p>关注人数 323.4万</p> <a href="javascript:">点击进入</a> </div> </li> <li> <div class="img-3d"> <div class="img-back"> <img src="http://placehold.it/100x50" alt=""> </div> <div class="img-front"> <img src="http://placehold.it/100x40" alt=""> </div> </div> <div class="mask"> <img src="http://placehold.it/20x24" alt=""> <p>关注人数 323.4万</p> <a href="javascript:">点击进入</a> </div> </li> <li> <div class="img-3d"> <div class="img-back"> <img src="http://placehold.it/100x50" alt=""> </div> <div class="img-front"> <img src="http://placehold.it/100x40" alt=""> </div> </div> <div class="mask"> <img src="http://placehold.it/20x24" alt=""> <p>关注人数 323.4万</p> <a href="javascript:">点击进入</a> </div> </li> <li> <div class="img-3d"> <div class="img-back"> <img src="http://placehold.it/100x50" alt=""> </div> <div class="img-front"> <img src="http://placehold.it/100x40" alt=""> </div> </div> <div class="mask"> <img src="http://placehold.it/20x24" alt=""> <p>关注人数 323.4万</p> <a href="javascript:">点击进入</a> </div> </li> <li> <div class="img-3d"> <div class="img-back"> <img src="http://placehold.it/100x50" alt=""> </div> <div class="img-front"> <img src="http://placehold.it/100x40" alt=""> </div> </div> <div class="mask"> <img src="http://placehold.it/20x24" alt=""> <p>关注人数 323.4万</p> <a href="javascript:">点击进入</a> </div> </li> <li> <div class="img-3d"> <div class="img-back"> <img src="http://placehold.it/100x50" alt=""> </div> <div class="img-front"> <img src="http://placehold.it/100x40" alt=""> </div> </div> <div class="mask"> <img src="http://placehold.it/20x24" alt=""> <p>关注人数 323.4万</p> <a href="javascript:">点击进入</a> </div> </li> <li> <div class="img-3d"> <div class="img-back"> <img src="http://placehold.it/100x50" alt=""> </div> <div class="img-front"> <img src="http://placehold.it/100x40" alt=""> </div> </div> <div class="mask"> <img src="http://placehold.it/20x24" alt=""> <p>关注人数 323.4万</p> <a href="javascript:">点击进入</a> </div> </li> <li> <div class="img-3d"> <div class="img-back"> <img src="http://placehold.it/100x50" alt=""> </div> <div class="img-front"> <img src="http://placehold.it/100x40" alt=""> </div> </div> <div class="mask"> <img src="http://placehold.it/20x24" alt=""> <p>关注人数 323.4万</p> <a href="javascript:">点击进入</a> </div> </li> <li> <div class="img-3d"> <div class="img-back"> <img src="http://placehold.it/100x50" alt=""> </div> <div class="img-front"> <img src="http://placehold.it/100x40" alt=""> </div> </div> <div class="mask"> <img src="http://placehold.it/20x24" alt=""> <p>关注人数 323.4万</p> <a href="javascript:">点击进入</a> </div> </li> <li> <div class="img-3d"> <div class="img-back"> <img src="http://placehold.it/100x50" alt=""> </div> <div class="img-front"> <img src="http://placehold.it/100x40" alt=""> </div> </div> <div class="mask"> <img src="http://placehold.it/20x24" alt=""> <p>关注人数 323.4万</p> <a href="javascript:">点击进入</a> </div> </li> <li> <div class="img-3d"> <div class="img-back"> <img src="http://placehold.it/100x50" alt=""> </div> <div class="img-front"> <img src="http://placehold.it/100x40" alt=""> </div> </div> <div class="mask"> <img src="http://placehold.it/20x24" alt=""> <p>关注人数 323.4万</p> <a href="javascript:">点击进入</a> </div> </li> <li> <div class="img-3d"> <div class="img-back"> <img src="http://placehold.it/100x50" alt=""> </div> <div class="img-front"> <img src="http://placehold.it/100x40" alt=""> </div> </div> <div class="mask"> <img src="http://placehold.it/20x24" alt=""> <p>关注人数 323.4万</p> <a href="javascript:">点击进入</a> </div> </li> <li> <div class="img-3d"> <div class="img-back"> <img src="img/icon22.jpg" alt=""> </div> <div class="img-front"> <img src="img/icon13.jpg" alt=""> </div> </div> <div class="mask"> <img src="img/heart.png" alt=""> <p>关注人数 323.4万</p> <a href="javascript:">点击进入</a> </div> </li> <li id="btnRefresh"> <div class="iconRefresh"></div> <span>换一批</span> </li> </ul> </div> </div> </body> <script type="text/javascript"> window.onload = function () { var clickTimes = 1; //总列数 var lineCount = 6; var btnRefresh = document.querySelector("#btnRefresh"); var iconRefresh = document.querySelector(".iconRefresh") var img3DList = document.querySelectorAll(".img-3d"); var len = img3DList.length; btnRefresh.onclick = function () { iconRefresh.style.transition = ".3s linear"; iconRefresh.style.transform = "rotate("+360*clickTimes+"deg)"; for (var i = 0; i< len; i++){ var colNum = parseInt(i/lineCount); var rowNum = i%lineCount; var delayTime = (colNum+rowNum)*100; img3DList[i].style.transition = ".3s "+delayTime+"ms linear"; img3DList[i].style.transform = "rotateY("+180*clickTimes+"deg)"; } clickTimes++; } } </script> </html>

提示：你可以先修改部分代码再运行。

转载请注明：有爱前端 » 仿天猫商品品牌图片墙换一批动画特效