<!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 » 诱人的照片墙
前端ABC