本文实例为大家分享了纯CSS实现图片点击放大带关闭按钮的图片特效代码，效果非常棒，供大家参考，具体内容如下
源码下载、演示
实现代码：
CSS代码：
CSS Code复制内容到剪贴板 <styletype="text/css"> .product{width:320px;height:150px;border:1pxsolid#ddd;margin:0auto;padding:10px;} .productInfo{width:150px;float:left;} .productMfr{font:bold16px/18pxarial,sans-serif;color:#c00;padding:0;margin:0;} .productType{font:bold14px/18pxarial,sans-serif;color:#000;padding:0;margin:0;} .features{padding:10px0;margin:0;list-style:none;} .featuresli{font:normal12px/16pxarial,sans-serif;color:#555;} .price{font:bold14px/18pxarial,sans-serif;color:#00c;padding:0010px0;margin:0;} a.clickbox,a.clickbox:visited,a.clickbox:hover{text-decoration:none;text-align:center;} a.clickboximg{display:block;border:0;} a.clickboxb{display:block;} a.clickboxem{font:bold10px/12pxarial,sans-serif;color:#000;} a.clickbox{float:left;margin:015px15px0;display:inline;} a.clickbox.lightbox{position:absolute;left:-9999px;top:-10000px;cursor:default;z-index:500;} a.clickbox.light{position:absolute;left:0;top:0;width:100%;} a.clickbox.box{position:absolute;left:0;width:100%;text-align:center;height:300px;top:30%;margin-top:-150px;} /*triggerforIE6*/ a.clickbox:active{direction:ltr;} a.clickbox:active.lightbox{left:0;top:0;width:100%;height:100%;} a.clickbox.lightbox:hover,a.clickbox:focus.lightbox{position:fixed;left:0;top:0;width:100%;height:100%;} a.clickbox.lightbox:hover.light,a.clickbox:active.lightbox.light,a.clickbox:focus.lightbox.light{background:#fff;width:100%;height:100%;filter:alpha(opacity=90);filter:progid:DXImageTransform.Microsoft.Alpha(opacity=90); opacity:0.90;} a.clickbox.lightbox:hover.boximg,a.clickbox:active.lightbox.boximg,a.clickbox:focus.lightbox.boximg{border:1pxsolid#ddd;margin:0auto;padding:30px;background:#fff;} a.clickbox.lightbox:hover.boxspan,a.clickbox:active.lightbox.boxspan,a.clickbox:focus.lightbox.boxspan{display:block;width:560px;padding:0;margin:10pxauto;text-align:center;text-decoration:none;background:#fff;border:1pxsolid#ddd;} a.clickbox.lightbox.boxspan.title{font:normal22px/26pxverdana,sans-serif;color:#069;} a.clickbox.lightbox.boxspan.text{font:normal11px/16pxverdana,sans-serif;color:#333;} .clear{clear:left;} a.clickboxi{display:block;width:32px;height:32px;position:fixed;rightright:-100px;top:0;z-index:500;} a.clickbox.lightbox:hoveri,a.clickbox:activei,a.clickbox:focusi{rightright:50%;top:30%;background:url(close2.png);margin-right:-295px;margin-top:-165px;} #close{display:block;position:fixed;width:32px;height:32px;rightright:50%;top:30%;margin-right:-295px;margin-top:-165px;z-index:1000;background:url(trans.gif);cursor:pointer;} </style> <!--[iflteIE6]> <styletype="text/css"> /*togetIE6tocentertheClickbox-adjusttheheighttocoverthewholepage*/ a.clickbox:active.lightbox{left:50%;margin-left:-2500px;height:2000px;width:5000px;} a.clickbox:active.lightbox.light{height:2000px;} a.clickboxi{display:block;width:32px;height:32px;overflow:hidden;float:rightright;cursor:pointer;position:static;background:url(close.png);} #close{margin-right:0;margin-top:0;z-index:1000;background:url(trans.gif);cursor:pointer;} a.clickbox.lightbox:hoveri, a.clickbox:activei{rightright:32px;top:32px;background:url(close.png);margin-right:0;margin-top:0;background:url(close.png);} a.clickbox.frame{width:500px;height:300px;background:#fff;border:1pxsolid#000;padding:10px;} a.clickbox.box{top:5%;margin-top:0;} </style>
htm代码：
XML/HTML Code复制内容到剪贴板 <body> <divclass="product"> <aclass="clickbox"href="#url"> <imgsrc="eos500d-thumb.jpg"alt=""title="Clickforlargerimage"/> <em>•largeimage•</em> <bclass="lightbox"> <bclass="light"> </b><bclass="box"> <imgsrc="eos500d.jpg"alt=""/> <spanclass="title">It'syourvision-makeitcount</span> <spanclass="text">WiththeEOS500D,everysideofyourstorycomesalive.<br/> <i></i> </span> </b> </b> </a> <divclass="productInfo"> <pclass="productMfr">CanonEOS500D</p> <pclass="productType">DigitalSLRCamera</p> <ulclass="features"> <li>•15.1MPCMOSsensor</li> <li>•FullHD(1080p)movies</li> </ul> <pclass="price">£470</p> <imgsrc="cart.gif"alt="Checkout"/></div> </div> <divid="close"></div> <br> <br> </body> 以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持查字典教程网。