CSS3可以做动画大家都是耳熟能详的了。
今天我们就利用CSS3动画这一特性来制作一个漂亮的照片墙展示图片效果！
第一：HTML部分：
这里我们首先放十张图片在页面上面。
1 2 3 4 5 6 7 8 9 10 11 12 | <div class="container"> <img class="pic pic1" src="./image/mm1.jpg"> <img class="pic pic2" src="./image/mm2.jpg"> <img class="pic pic3" src="./image/mm3.jpg"> <img class="pic pic4" src="./image/mm4.jpg"> <img class="pic pic5" src="./image/mm5.jpg"> <img class="pic pic6" src="./image/mm6.jpg"> <img class="pic pic7" src="./image/mm7.jpg"> <img class="pic pic8" src="./image/mm8.jpg"> <img class="pic pic9" src="./image/mm9.jpg"> <img class="pic pic10" src="./image/mm10.jpg"></div> |
第二：CSS3部分（样式部分）
这一部分就是我们这节的重点了，如上图所示照片的位置各不相同，我们肯定会用到CSS3一下的知识点：
•CSS3的旋转 rotate
•CSS3的缩放 scale
•CSS3的阴影 box-shadow
没错就是这些功能我们就可以做一个漂亮的照片墙了。来看看我们的代码吧，这里只展示部分代码了聪明的小伙伴肯定知道怎么做的！
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 | .container{ width:960px; height:450px; margin:60px auto; position:relative;}.container img{ width: 200px; height: auto; padding:5px; background:white; border:1px solid #ddd; box-shadow:2px 2px 3px rgba(50, 50, 50, 0.4); -webkit-transition:all 0.5s ease-in; -moz-transition:all 0.5s ease-in; transition:all 0.5s ease-in; position:absolute; z-index:1;}.container img:hover{ box-shadow:15px 15px 20px rgba(50, 50, 50, 0.4); -webkit-transform:rotate(0deg) scale(1.20); -moz-transform:rotate(0deg) scale(1.20); transform:rotate(0deg) scale(1.20); z-index:2;}.pic1{ left: 400px; top: 0; -webkit-transform: rotate(-5deg); -moz-transform: rotate(-5deg); transform: rotate(-5deg);}.pic2{ top: 0; left: 600px; -webkit-transform: rotate(-20deg); -moz-transform: rotate(-20deg); transform: rotate(-20deg);}.pic3{ bottom: 0; right: 0; -webkit-transform: rotate(5deg); -moz-transform: rotate(5deg); transform: rotate(5deg);}/* 下面的代码大同小异, 就是一些值不同而于 */ |
就是这么简单的代码就可以实现上图所示的效果了。
转载请注明来源地址：小川编程 » https://www.youhutong.com/index.php/article/index/158.html
1、本站发布的内容仅限用于学习和研究目的.请勿用于商业或非法用途，下载后请24小时内删除。
2、本站所有内容均不能保证其完整性，不能接受请勿购买或下载，如需完整程序，请去其官方购买正版使用
3、本站联系方式Email：admin@youhutong.com ，收到邮件会第一时间处理。
4、如侵犯到任何版权问题，请立即告知本站（立即在线告知），本站将及时删除并致以最深的歉意
