#img { width:503px; height:252px; margin:50px auto; perspective:700px; -webkit-perspective:700px; } #img img { width:50px; height:50px; float:left; } #btn { width:100px; height:40px; line-height:40px; text-align:center; font-size:16px; color:#000; background:#0fc; border-radius:5px; margin:0 auto; padding:5px 5px; cursor:pointer; }
该照片墙使用原生js和css3实现的,主要效果分为三个部分:
闪的效果(瞬间高度宽度变为0,scale,随机)。
图片由小变大,同时透明度由1-0。
图片旋转,同时透明度由0-1,根据Z轴旋转实现。