诱人的照片墙

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>photoWall</title>
<meta name="description" content="">
<meta name="keywords" content="">
<link href="" rel="stylesheet">
<style type="text/css">
	
	body{
		text-align: center;
		background-color: lightgray;
	}

	div{
		width: 1000px;
		margin: 30px auto;
		text-align: left;
	}

	.pic{
		width: 180px;
		height: 280px;
		border: 10px solid #FFFFFF;
		box-shadow: 5px 5px 3px rgba(50, 50, 50, 0.4);
		position: relative;
		transition: all 0.5s;
	}

	.pic:hover{
		z-index: 1;
		transform: rotate(0deg) scale(1.2, 1.2);
		box-shadow:5px 5px 3px rgba(50, 50, 50, 0.9);
	}
	
	.pic1{transform:rotate(-10deg)};.pic2{transform:rotate(5deg);}.pic3{transform:rotate(-5deg);}.pic4{transform:rotate(10deg);}.pic5{transform:rotate(-5deg);}.pic6{transform:rotate(5deg);}.pic7{transform:rotate(-15deg);}.pic8{transform:rotate(-5deg);}.pic9{transform:rotate(10deg);
}
</style>
</head>
<body>
	
	<script type="text/javascript">
		var imgArr = ['https://ss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=1404356397,2874429050&fm=23&gp=0.jpg', 'https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=179519880,881473915&fm=23&gp=0.jpg', 'https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=3191820120,1931768108&fm=23&gp=0.jpg', 'https://ss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=1540033118,662535013&fm=23&gp=0.jpg', 'https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=3447337509,1979894727&fm=23&gp=0.jpg', 'https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=1952191313,2099420615&fm=23&gp=0.jpg', 'https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=2302475393,2051308799&fm=23&gp=0.jpg', 'https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=2455132103,1265898638&fm=23&gp=0.jpg', 'https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=1909060281,1414981297&fm=23&gp=0.jpg','https://ss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=2307098082,1684931909&fm=23&gp=0.jpg'];

		var imgWall = document.createElement('div');
		document.body.appendChild(imgWall);

		for (imgSrc of imgArr){
			var imgItem = document.createElement('img');
			imgItem.src = imgSrc;

			imgItem.className = 'pic '+'pic' + imgArr.indexOf(imgSrc);

			imgWall.appendChild(imgItem);
		}
	</script>

</body>
</html>

欢迎分享本文,转载请保留出处:前端ABC » 诱人的照片墙

赞 (0)
分享到:更多 ()

发表评论 0