[分享]css做镜头相框过度效果

CSS是一种样式表语言，可以对网页的样式进行详细地设计。其中，CSS做镜头相框过度效果的方法相对较为简单，只需要用到css3中的transform、transition和zindex属性，便可以实现相...

CSS是一种样式表语言，可以对网页的样式进行详细地设计。其中，CSS做镜头相框过度效果的方法相对较为简单，只需要用到css3中的transform、transition和z-index属性，便可以实现相框效果的优美切换。

 .photo {
    position: relative;
    width: 500px;
    height: 350px;
    overflow: hidden;
  }
  .picture {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    transform: scale(1);
    transition: all 0.5s ease;
    z-index: 10;
  }
  .frame {
    position: absolute;
    top: 5%;
    left: 5%;
    width: 90%;
    height: 90%;
    border: 10px solid white;
    box-sizing: border-box;
    transform: scale(0.95);
    transition: all 0.5s ease;
    z-index: 5;
  }
  .photo:hover .picture {
    transform: scale(1.05);
    z-index: 5;
  }
  .photo:hover .frame {
    transform: scale(1);
    z-index: 10;
  } 

上述代码中，.photo为容器类，.picture为图片类，.frame为相框类。容器类设置了relative定位和overflow:hidden属性，以使得相框效果不会越出容器的限定范围。图片类和相框类利用定位属性进行定位，并且都进行了缩放变换。但是，二者的初始缩放比例不同，图片类的初始缩放比例为1，而相框类的初始缩放比例为0.95，以便在鼠标悬停时能够完整地覆盖在图片之上。

CSS的transform和transition属性分别用于控制动画效果的变换和发生的时间。在这里，图片类和相框类都被设置了transition效果，以便在鼠标悬停时能够进行优美的过渡，达到相框式的效果。

最后，利用z-index属性控制了图片类和相框类之间的层级关系，使得鼠标悬停时能正确地进行覆盖。