css照片墙实现_PHP中文网手记

摘要：<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>css3照片墙</title> <style> div{width:1400px;margin:20px auto;} img

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>css3照片墙</title>
		<style>
			div{width:1400px;margin:20px auto;}
img {width:300px;height:300px;box-sizing: border-box;padding:5px;border:1px solid #ccc;margin:2px 3px;border-radius:4px;cursor: pointer;box-shadow:1px 0px 5px 1px #eae;transition: all .5s;}
		img:hover{box-shadow:0 0 8px 1px #eee;border:1px solid #999;background-color:#fff;z-index: 99;}
		
		/* 缩放 */
		.scale:hover{transform:scale(1.15); }
		
		/* 旋转 */
		.rotateRight:hover{transform: rotate(8deg);}
		.rotateLeft:hover{transform: rotate(-8deg);}
			
		</style>
	</head>
	<body>
<div>
	<img class="rotateLeft" src="images/1.jpg" alt="">
	<img class="rotate"	 src="images/2.jpg" alt="">
	<img class="rotateRight" src="images/3.jpg" alt="">
	<img class="rotateRight" src="images/4.jpg" alt="">
	<img  src="images/5.jpg" alt="">
	<img src="images/6.jpg" alt="">
	<img class="scale" src="images/7.jpg" alt="">
	<img src="images/8.jpg" alt="">
	<img src="images/9.jpg" alt="">
	<img class="scale" src="images/10.jpg" alt="">
	<img src="images/11.jpg" alt="">
	<img src="images/12.jpg" alt="">
	<img class="scale" src="images/13.jpg" alt="">
	<img src="images/14.jpg" alt="">
	<img src="images/15.jpg" alt="">
	<img class="scale" src="images/16.jpg" alt="">
</div>		
	</body>
</html>

批改老师：灭绝师太批改时间：2019-02-11 09:40:36
老师总结：其实就是css3新属性方法的使用,多多练习吧

css照片墙实现

热门词条