HTML照片墙

照片墙主要代码，最后附下载链接

<style type="text/css">
			body{
				background: url(image/bg.jpg);
				
			}
			#gallery{
				margin: 100px auto;
				padding: 40px;
				list-style: none;
				width: 1000px;
			}
			#gallery li{
				float: left;
				width: 300px;
				overflow: visible;
			}
			#gallery li a{
				color: purple;
				text-decoration: none;
				font-size: 4px;
				display: block;
				text-align: center;
				background-color: pink;
				padding: 3px;
				opacity: 0.8;
				box-shadow: 0 0 5px 2px #323232;
				-webkit-transition: all 500ms linear;
				-moz-transform: all 500ms linear;
				transform: all 500ms linear;
				-webkit-transform-origin: 0 0;
				-moz-transform-origin: 0 0;
				transform-origin: 0 0;
				-webkit-transition: rotate(-15deg);
				-moz-transform: rotate(-15deg);
				transform: rotate(-15deg);		
			}
			#gallery li a img{
				width: 300px;
			}
			#gallery li:nth-child(3n) a{
				-webkit-transition: rotate(20deg);
				-moz-transform: rotate(20deg);
				transform: rotate(20deg);	
			}
			#gallery li:nth-child(4n) a{
				-webkit-transition: rotate(15deg);
				-moz-transform: rotate(15deg);
				transform: rotate(15deg);	
			}
			#gallery li:nth-child(5n) a{
				-webkit-transition: rotate(-15deg);
				-moz-transform: rotate(-15deg);
				transform: rotate(-15deg);	
			}
			#gallery li:nth-child(7n) a{
				-webkit-transition: rotate(-20deg);
				-moz-transform: rotate(-20deg);
				transform: rotate(-20deg);	
			}
			#gallery li a:hover{
				position: relative;
				z-index: 999;
				opacity: 1;
				-webkit-transition: rotate(0deg) scale(1.5);
				-moz-transform: rotate(0deg) scale(1.5);
				transform: rotate(0deg) scale(1.5);
			}
			#gallery li a:hover:after{
				content: attr(title);
			}
		</style>

下载链接在这