這是一個簡單的css3圖片變焦的例子。 使用了transform,transition-duration以及 box-shadow,當鼠標觸碰圖片,產生響應,平滑縮放。 支持的瀏覽器有:Chrome, Safari 4+, Opera 9.5+, FF 4+,ie沒法完美支持.css
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*/ }