2D相册（记录小欧知识）

这篇是一个小小的2D相册，你想看的图片会缓慢放大呈现出来。
1.搭建框架，装入图片。

<body>
<div class="container">
 <div class="demo">
  <img src="看大图img/1.jpg"  style="height:75px;width:100px;" alt="">
  <img src="看大图img/2.jpg" style="height:75px;width:100px;" alt="">
  <img src="看大图img/3.jpg" style="height:75px;width:100px;" alt="">
  <img src="看大图img/4.jpg" style="height:75px;width:100px;" alt="">
 </div>
</div>
</body>

2.设定样式。

 .container{
  height:500px;
  width:500px;
  position:absolute;
  margin:100px  0 0 500px;
  text-align: center;
 }
 .demo{
  height:300px;
  width:300px;
  position:relative;
  border:2px red solid;
  margin:100px 0 0 100px;
 }
 img{
  position:relative;
  float:left;
  margin:50px 23px 20px 25px;
  opacity: inherit;
  box-shadow: 2px 5px 10px #333;
   
 }

3.2D设定

 img:hover{
  transform:scale(4.2) translate(-40px,-30px);
  cursor: pointer;
  transition-duration:2s;
  transition-property:all; 
 }
  img:hover:nth-child(2){
  transform:scale(4.2) translate(40px,-30px);
    cursor: pointer;
 }
 img:hover:nth-child(3){
  transform:scale(4.2) translate(-40px,30px);
    cursor: pointer;
 }
 img:hover:nth-child(4){
  transform:scale(4.2) translate(40px,30px);
    cursor: pointer;
 }

4.完成。想看效果需要尝试一下，这是原始状态。
2D相册（记录小欧知识）
5.这是一个超级简单的相册，运用的知识（伪类+2D动画），巧妙运用在前端页面上，容易达到审美要求，但是泛滥运用显得没水平。我这里只是做一个知识记录。

2D相册（记录小欧知识）

相关推荐