CSS3图片展示效果

最新推荐文章于 2021-06-02 13:46:25 发布

weixin_30950237

最新推荐文章于 2021-06-02 13:46:25 发布

阅读量113

点赞数

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/undefined000/archive/2012/08/23/2651857.html

本文介绍了一种使用CSS3制作的动态相册效果。通过transition和transform属性实现了图片的旋转和平滑过渡，利用:before和:after伪元素增强了视觉效果。

CSS3的功能非常强大，配合现代浏览器可以做出赏心悦目的效果，这几天逛网站，参考了一些效果，顺手做了一个。Firefox浏览器可以看到最佳效果，原因下面会讲到，以下是效果预览：

首先写好页面基本的html代码，图片都是网上找的：

 1 <ul>
 2         <li>
 3             <a href="#"><img src="http://down.139zhuti.com/bizhi/2010/8/24/f2fcb01.jpg" alt=""></a>
 4         </li>
 5         <li>
 6             <a href="#"><img src="http://down.139zhuti.com/bizhi/2010/8/24/b8def93.jpg" alt=""></a>
 7         </li>
 8         <li>
 9             <a href="#"><img src="http://down.139zhuti.com/bizhi/2010/8/24/f2fcb02.jpg" alt=""></a>
10         </li>
11         <li>
12             <a href="#"><img src="http://down.139zhuti.com/bizhi/2010/8/24/e16ac0.jpg" alt=""></a>
13         </li>
14         <li>
15             <a href="#"><img src="http://down.139zhuti.com/bizhi/2010/8/24/261f104.jpg" alt=""></a>
16         </li>
17         <li>
18             <a href="#"><img src="http://down.139zhuti.com/bizhi/2010/8/24/261f102.jpg" alt=""></a>
19         </li>
20         <li>
21             <a href="#"><img src="http://down.139zhuti.com/bizhi/2010/8/24/32e0012.jpg" alt=""></a>
22         </li>
23         <li>
24             <a href="#"><img src="http://down.139zhuti.com/bizhi/2010/8/24/32e0011.jpg" alt=""></a>
25         </li>
26     </ul>

是一个基本的ul、li布局，效果的实现重点是下面的css代码：

  1 body{
  2     background-color:#ddd;
  3     margin:0
  4 }
  5 .wrapper{
  6     margin:100px auto;
  7     width:960px
  8 }
  9 ul{
 10     margin:0;
 11     list-style:none;
 12     padding:0
 13 }
 14 img{
 15     border:0;
 16     vertical-align:bottom
 17 }
 18 ul li{
 19     float:left;
 20     margin:5%;
 21     position:relative;
 22     width:140px;
 23     z-index:10
 24 }
 25 ul li img{
 26     position:relative;
 27     z-index:10
 28 }
 29 ul li img{
 30     -moz-box-sizing:border-box;
 31     -webkit-box-sizing:border-box;
 32     box-sizing:border-box;
 33     border:10px solid #fff;
 34     border-radius:3px;
 35     box-shadow:0 1px 5px rgba(0,0,0,.5)
 36 }
 37 ul li:before,ul li:after{
 38     -moz-box-sizing:border-box;
 39     -moz-transition:all .3s ease-out 0s;
 40     -webkit-box-sizing:border-box;
 41     -webkit-transition:all .3s ease-out 0s;
 42     -o-transtion:all .8s ease-out 0s;
 43     box-sizing:border-box;
 44     border:10px solid #fff;
 45     border-radius:3px;
 46     box-shadow:0 1px 5px rgba(0,0,0,0.5);
 47     content:"";
 48     height:100%;
 49     left:0;
 50     position:absolute;
 51     width:100%
 52 }
 53 ul li:before{
 54     -moz-transform:rotate(2deg);
 55     -moz-transform-origin:left bottom;
 56     -webkit-transform:rotate(2deg);
 57     -webkit-transform-origin:left bottom;
 58     -o-transform:rotate(2deg);
 59     -o-transform-origin:left bottom;
 60     top:4px;
 61     z-index:-5
 62 }
 63 ul li:after{
 64     -moz-transform:rotate(4deg);
 65     -moz-transform-origin:left bottom;
 66     -webkit-transform:rotate(4deg);
 67     -webkit-transform-origin:left bottom;
 68     -o-transform:rotate(4deg);
 69     -o-transform-origin:left bottom;
 70     top:8px;
 71     z-index:-10
 72 }
 73 ul li:hover:before,ul li:hover:after{
 74     -moz-transform:rotate(0deg);
 75     -webkit-transform:rotate(0deg);
 76     -o-transform:rotate(0deg)
 77 }
 78 ul li:nth-child(even):before,ul li:nth-child(even):after{
 79     top:0;
 80     -moz-transform:rotate(0deg);
 81     -webkit-transform:rotate(0deg);
 82     -o-transform:rotate(0deg)
 83 }
 84 ul li:nth-child(even):hover:before{
 85     top:4px;
 86     -moz-transform:rotate(2deg);
 87     -webkit-transform:rotate(2deg);
 88     -o-transform:rotate(2deg)
 89 }
 90 ul li:nth-child(even):hover:after{
 91     top:8px;
 92     -moz-transform:rotate(4deg);
 93     -webkit-transform:rotate(4deg);
 94     -o-transform:rotate(4deg)
 95 }
 96 ul li:first-child:before{
 97     top:4px;
 98     -moz-transform:rotate(-4deg);
 99     -webkit-transform:rotate(-4deg);
100     -o-transform:rotate(-4deg)
101 }
102 ul li:first-child:after{
103     top:8px;
104     -moz-transform:rotate(-8deg);
105     -webkit-transform:rotate(-8deg);
106     -o-transform:rotate(-8deg)
107 }
108 ul li:first-child:hover:before,ul li:first-child:hover:after{
109     top:0;
110     -moz-transform:rotate(0);
111     -webkit-transform:rotate(0);
112     -o-transform:rotate(0)
113 }