CSS3图片变焦效果-优快云博客

2019独角兽企业重金招聘Python工程师标准>>>

这是一个简单的css3图片变焦的例子。使用了transform，transition-duration以及 box-shadow，当鼠标触碰图片，产生响应，平滑缩放。支持的浏览器有：Chrome, Safari 4+, Opera 9.5+, FF 4+，ie无法完美支持.

HTML code

<div>
      <img alt="" src="nature1.jpg" />
      <img alt="" src="nature2.jpg" />
      <img alt="" src="nature3.jpg" />
      <img alt="" src="nature4.jpg" />
      <img alt="" src="nature5.jpg" />
      <img alt="" src="nature6.jpg" />
      <img alt="" src="nature7.jpg" />
      <img alt="" src="nature8.jpg" />
    </div>

CSS code

#gallery {
      text-align: center;
      width: 610px;
      margin: 70px auto;
    }
#gallery img {
  width: 300px;
  -webkit-transition-duration: 0.6s; /*Webkit: animation duration*/
  -moz-transition-duration: 0.6s; /*Mozilla: animation duration*/
  -o-transition-duration: 0.6s; /*Opera: animation duration*/
  opacity: 0.6; /*initial opacity of the image*/
  z-index: 1; /*place non-hover images behind the hover image*/
  margin: 0; /*remove default margin for images*/
  position: relative; /*solve the problem with z-index in Chrome*/
}

#gallery img:hover { 
  -webkit-transform: scale( 1.5 ); /*Webkit: increase size to 1.5x*/
  -moz-transform: scale( 1.5 ); /*Mozilla: scaling*/
  -o-transform: scale( 1.5 ); /*Opera: scaling*/
  box-shadow: 0px 0px 25px gray; /*CSS3 shadows: 25px fuzzy shadow around the entire image*/
  -webkit-box-shadow: 0px 0px 25px gray; /*Webkit: shadows*/
  -moz-box-shadow: 0px 0px 25px gray; /*Mozilla: shadows*/
  opacity: 1; /*default opacity*/
  z-index: 10; /*place hover image in front the non-hover images*/
}

转载于:https://my.oschina.net/u/265943/blog/292902