CSS3制作精致的照片墙特效
(编辑：jimmy 日期: 2024/11/25 浏览：3 次 )
本文实例为大家分享利用CSS3动画制作照片墙的详细步骤，供大家参考，具体内容如下
第一种实现效果：
Html代码如下:
XML/HTML Code复制内容到剪贴板- <body>
- <h2>照片墙制作</h2>
- <div class="container">
- <img class="img1" src="img/img (1).jpg" height="150" width="150" alt="">
- <img class="img2" src="img/img (2).jpg" height="160" width="200" alt="">
- <img class="img3" src="img/img (3).jpg" height="170" width="200" alt="">
- <img class="img4" src="img/img (4).jpg" height="240" width="200" alt="">
- <img class="img5" src="img/img (5).jpg" height="300" width="300" alt="">
- </div>
- </body>
CSS代码如下:
CSS Code复制内容到剪贴板- <style>
- * {margin:0; padding:0;}
- body { background-color: #eee; padding-top: 50px;}
- h2 { text-align: center;}
- .container { position: relative; width:1000px; height:700px; margin:0px auto; }
- img { position: absolute; top:50px; left:100px; cursor: pointer;
- padding:10px 10px 25px; background-color: #fff; border:1px solid #ddd;
- transition:0.5s; box-shadow: 3px 3px 3px #ccc;
- }
- .img1 { left:40px; top:20px; transform:rotate(30deg); z-index: 1;}
- .img2 { left:156px; top:156px; transform:rotate(-30deg); z-index: 1;}
- .img3 { left:381px; top:60px; transform:rotate(30deg); z-index: 1;}
- .img4 { left:458px; top:256px; transform:rotate(30deg); z-index: 1;}
- .img5 { left:684px; top:110px; transform:rotate(-40deg); z-index: 1;}
- img:hover { transform:rotate(0deg); transform:scale(1.5); box-shadow: 6px 6px 6px #656565; z-index: 2;}
- </style>
效果图:
第二种实现效果：
第一部分：HTML
这里我们首先放十张图片在页面上面。（有什么靓照尽管上来哦！）
XML/HTML Code复制内容到剪贴板- <div class="content">
- <img class="pic1" src="img/1.jpg" />
- <img class="pic2" src="img/2.jpg" />
- <img class="pic3" src="img/3.jpg" />
- <img class="pic4" src="img/4.jpg" />
- <img class="pic5" src="img/5.jpg" />
- <img class="pic6" src="img/6.jpg" />
- <img class="pic7" src="img/7.jpg" />
- <img class="pic8" src="img/8.jpg" />
- <img class="pic9" src="img/9.jpg" />
- <img class="pic10" src="img/10.jpg" />
- </div>
第二部分：CSS3
这一部分就是我们这节的重点了，如上图所示照片的位置各不相同，我们肯定会用到CSS3一下的知识点：
CSS3的旋转 rotate
CSS3的缩放 scale
CSS3的阴影 box-shadow
没错就是这些功能我们就可以做一个漂亮的照片墙了。来看看我们的代码吧，这里只展示部分代码了聪明的小伙伴肯定知道怎么做的！
CSS Code复制内容到剪贴板- body{
- background: url(../img/bg1.jpg) no-repeat top center fixed;
- background-size: 100% auto;
- }
- .content{
- width: 900px;
- height: 1000px;
- overflow: hidden;
- margin: 100px auto;
- position: relative;
- }
- img{
- z-index: 1;
- width: 20%;
- height: auto;
- position: absolute;
- padding: 10px 10px 15px 10px;
- background: #ffffff;
- border: 1px solid #CCCCCC;
- /* 动画的时间 */
- -moz-transition: 0.5s;
- -webkit-transition: 0.5s;
- transition: 0.5s;
- }
- img:hover{
- z-index: 2;
- transform: scale(1.5);
- -moz-transform: scale(1.5) ;
- -webkit-transform: scale(1.5) ;
- box-shadow: -10px 10px 20px #000000;
- -moz-box-shadow: -10px 10px 20px #000000;
- -webkit-box-shadow: -10px 10px 20px #000000;
- }
- .pic1{
- left: 100px;
- top: 50px;
- -webkit-transform: rotate(20deg);
- -moz-transform: rotate(20deg);
- transform: rotate(20deg);
- }
- .pic2{
- left: 280px;
- top: 60px;
- -webkit-transform: rotate(-10deg);
- -moz-transform: rotate(-10deg);
- transform: rotate(-10deg);
- }
- /* 下面的代码大同小异就不依依展示了 */
就是这么简单的代码就可以实现上图所示的效果了。小伙伴们有兴趣的自己动手尝试一下把自己的靓照放上去看看。
PS： CSS3还可以写出更多的精彩绚丽效果，小伙伴有兴趣可以深入的研究一下！
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。
下一篇：CSS实现曲面阴影效果的简单实例(推荐)