这篇文章主要为大家详细介绍了css3制作漂亮的照片墙的具体步骤，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
本文实例为大家分享利用CSS3动画制作照片墙的详细步骤，供大家参考，具体内容如下
第一种实现效果：
Html代码如下:
照片墙制作
@@##@@@@##@@@@##@@@@##@@@@##@@
CSS代码如下:
立即学习“前端免费学习笔记（深入）”；
* {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;}
效果图:
第二种实现效果：
第一部分：HTML
这里我们首先放十张图片在页面上面。（有什么靓照尽管上来哦！）
@@##@@ @@##@@ @@##@@ @@##@@ @@##@@ @@##@@ @@##@@ @@##@@ @@##@@ @@##@@
第二部分：CSS3
这一部分就是我们这节的重点了，如上图所示照片的位置各不相同，我们肯定会用到CSS3一下的知识点：
CSS3的旋转 rotate
CSS3的缩放 scale
CSS3的阴影 box-shadow
没错就是这些功能我们就可以做一个漂亮的照片墙了。来看看我们的代码吧，这里只展示部分代码了聪明的小伙伴肯定知道怎么做的！
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还可以写出更多的精彩绚丽效果，小伙伴有兴趣可以深入的研究一下！
以上就是本文的全部内容，希望对大家的学习有所帮助，更多相关内容请关注PHP中文网！
相关推荐：
CSS实现单行、多行文本溢出显示省略号的实现方法
如何实现css图标与文字对齐
以上就是用CSS3制作照片墙的特效的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1609979.html
微信扫一扫 
支付宝扫一扫 
