css3图片墙
css相关知识：
1. 使用box-shadow设置图片阴影,为照片加上阴影
eg： box-shadow: 0 0 5px 3px #abc
2. 使用tansform-origin定义变形原点
eg: -webkit-transform-origin: 0 1px
3. 使用transform变形，常用变形函数有scale、rotate、translate
eg: -webkit-transform: scale(0.8, 0.5); -webkit-transform: skew(-30deg, -10deg); -webkit-transform: rotate(30deg); -webkit-transform: translate(10px, 10px); 定义多个变形： -webkit-transform: rotate(30deg) translate(10px, 10px) scale(1, 2);
4. transition实现过渡效果
transition: transition-property || transition-duration || transition-timing-function || transition-delay
eg:
-webkit-transition: all 1000ms linear 500ms
过渡函数主要包括：
linear 一个速度
ease 先慢再快再慢
ease-in 先慢后越来越快
ease-out 先快后越来越慢
ease-in-out 开始和结束时都很慢
cubic-bezier： 速度为贝塞尔曲线
5. 添加内容 :before :after 添加content内容
6. :hover添加鼠标滑过效果
效果：
鼠标滑过使用scale拉伸图片，变换角度， 添加内容：
代码：
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <style type="text/css"> body{ background: url(../images/12.jpg); background-size: cover; } #gallary{ margin: 10px auto; padding: 40px; list-style: none; width:1060px; } #gallary li{ float: left; width: 206px; height: 160px; oveflow: visible; } #gallary li a{ color: #333; text-decoration: none; font-size: 4px; display: block; text-align: center; background-color: #FFF; padding: 3px; opacity: 0.8; box-shadow: 0 0 5px 2px #333; } #gallary li a{ -webkit-transition: all 500ms linear; -moz-transition: all 500ms linear; transition: all 500ms linear; -webkit-transfrom-origin: 0 0; -moz-transfrom-origin: 0 0; transfrom-origin: 0 0; -webkit-transform: rotate(-15deg); -moz-transform: rotate(-15deg); transform: rotate(-15deg); } #gallary li a img{ width: 200px; } #gallary li:nth-child(3n) a{ -webkit-transform: rotate(20deg); -moz-transform: rotate(20deg); transform: rotate(20deg); } #gallary li:nth-child(4n) a{ -webkit-transform: rotate(15deg); -moz-transform: rotate(15deg); transform: rotate(15deg); } #gallary li:nth-child(7n) a{ -webkit-transform: rotate(-10deg); -moz-transform: rotate(-10deg); transform: rotate(-10deg); } #gallary li:nth-child(9n) a{ -webkit-transform: rotate(-20deg); -moz-transform: rotate(-20deg); transform: rotate(-20deg); } #gallary li a:hover{ position: relative; z-index: 1; opacity: 1; -webkit-transform: rotate(0deg) scale(2); -moz-transform: rotate(0deg) scale(2); transform: rotate(0deg) scale(2); } #gallary li a:hover:after{ content: attr(title); } </style> </head> <body> <ul id="gallary"> <li><a href="#" title="picture1"><img src="../images/1.jpg"></a></li> <li><a href="#" title="picture2"><img src="../images/2.jpg"></a></li> <li><a href="#" title="picture3"><img src="../images/3.jpg"></a></li> <li><a href="#" title="picture4"><img src="../images/4.jpg"></a></li> <li><a href="#" title="picture5"><img src="../images/5.jpg"></a></li> <li><a href="#" title="picture7"><img src="../images/7.jpg"></a></li> <li><a href="#" title="picture8"><img src="../images/8.jpg"></a></li> <li><a href="#" title="picture9"><img src="../images/9.jpg"></a></li> <li><a href="#" title="picture10"><img src="../images/10.jpg"></a></li> <li><a href="#" title="picture6"><img src="../images/11.jpg"></a></li> <li><a href="#" title="picture11"><img src="../images/1.jpg"></a></li> <li><a href="#" title="picture12"><img src="../images/2.jpg"></a></li> <li><a href="#" title="picture13"><img src="../images/3.jpg"></a></li> <li><a href="#" title="picture14"><img src="../images/4.jpg"></a></li> <li><a href="#" title="picture15"><img src="../images/5.jpg"></a></li> </ul> </body> </html>
