码迷,mamicode.com
首页 > 其他好文 > 详细

绚丽照片墙效果

时间:2015-03-21 15:31:38      阅读:110      评论:0      收藏:0      [点我收藏+]

标签:

这个效果的实现用css3更为简洁,需要用到transform标签和transition标签以及层数标签z-index,下面就来介绍一下这两个标签。

 

transform标签:

    transform:rotate(130deg) scale(3);

表示旋转130度,并放大3倍

 

transition标签:

  transition:2s;

表示执行2秒

z-index标签:

  初始状态时可设置z-index:1   鼠标移到图片上img.hover中的z-index值大于1即可

 

实例代码:

img{
 padding: 10px 10px 15px;background:#fff;border: 1px solid #ddd;
 position: absolute;
  transition:0.5s;
  z-index:1;
}
img:hover{
 transform:rotate(0deg);
  transform:scale(1.2);
  box-shadow: 10px 8px 10px #ccc;
  z-index: 20;
}

.pic1{
 left: 0px;
 top: 20px;
 transform:rotate(25deg);
 
}

绚丽照片墙效果

标签:

原文地址:http://www.cnblogs.com/wyy725872/p/4355539.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!