首页 > 代码库 > 基于CSS3图片可倾斜摆放的动画相册
基于CSS3图片可倾斜摆放的动画相册
今天我们又要来分享一个CSS3动画相册。之前我们分享过一个很酷的放满女神的HTML5/CSS3相册，相册是全屏展示的。今天这款相册的特点是图片可以任意角度的倾斜摆放，就像随意放在桌面上一样。另外，当鼠标滑过图片时，被遮挡在下方的图片也可以凸显出来。效果图如下：
在线预览 源码下载
实现的代码。
html代码：
<div class="container"> <img src="img/mm1.jpg" class="pic1" /> <img src="img/mm2.jpg" class="pic2" /> <img src="img/mm3.jpg" class="pic3" /> <img src="img/mm4.jpg" class="pic4" /> <img src="img/mm5.jpg" class="pic5" /> <img src="img/mm6.jpg" class="pic6" /> <img src="img/mm7.jpg" class="pic7" /> <img src="img/mm8.jpg" class="pic8" /> <img src="img/mm9.jpg" class="pic9" /> <img src="img/mm10.jpg" class="pic10" /> </div>
css代码：
@charset "utf-8";*{padding:0;margin:0;}div{font-family:"微软雅黑";font-size:14px;color:#666;padding:0;margin:0;}body{background:#eee;}/*css3实现照片墙的样式*/.container{width:960px;height:450px;margin:60px auto;position:relative;}.container img{position:absolute;padding:10px 10px 15px;background:#fff;border:1px solid #ddd;-webkit-transition:1s ;-moz-transition:1s ;transition:1s ;z-index:1;}.container img:hover{-webkit-transform:rotate(0deg);-moz-transform:rotate(0deg);transform:rotate(0deg);-webkit-transform:scale(1.1);-moz-transform:scale(1.1);transform:scale(1.1);-webkit-box-shadow:5px 5px 5px #ddd;-moz-box-shadow:5px 5px 5px #ddd;box-shadow:5px 5px 5px #ddd;z-index:2;cursor:pointer;}.pic1{top:0px;left:400px;-webkit-transform:rotate(-5deg);-moz-transform:rotate(-5deg);transform:rotate(-5deg);}.pic2{top:0px;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);}.pic4{bottom:0;left:300px;-webkit-transform:rotate(-10deg);-moz-transform:rotate(-10deg);transform:rotate(-10deg);}.pic5{bottom:0;left:0;-webkit-transform:rotate(-10deg);-moz-transform:rotate(-10deg);transform:rotate(-10deg);}.pic6{top:0;left:0;-webkit-transform:rotate(10deg);-moz-transform:rotate(10deg);transform:rotate(10deg);}.pic7{top:0;left:850px;-webkit-transform:rotate(20deg);-moz-transform:rotate(20deg);transform:rotate(20deg);}.pic8{bottom:-20px;right:630px;-webkit-transform:rotate(5deg);-moz-transform:rotate(5deg);transform:rotate(5deg);}.pic9{top:90px;left:550px;-webkit-transform:rotate(15deg);-moz-transform:rotate(15deg);transform:rotate(15deg);}.pic10{left:180px;top:20px;-webkit-transform:rotate(-10deg);-moz-transform:rotate(-10deg);transform:rotate(-10deg);}
via:http://www.w2bc.com/Article/15956
基于CSS3图片可倾斜摆放的动画相册
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。