CSS实现放大镜/狙击镜效果

放大镜或是狙击镜那样的效果
服务器君一共花费了670.056 ms进行了6次数据库查询,努力地为您提供了这个页面。
试试阅读模式?希望听取您的建议

图片放大,这是一个比较容易的效果了。当然,今天说的可不是简简单单的在一个框里放大,而是一个圆。就像放大镜或是狙击镜那样,只有圆圈里的放大,圈外的当然还是原来的图片。这是不是很不可思议? 当然不是。做过Flash的也许会脱口而出:套个蒙版就是了。可惜CSS不是Flash,没有那一套。我们只有从CSS里面慢慢挖掘。

先说IE,因为IE有滤镜,可以实现许多意想不到的功能。先来整理下我们的目标:

效果演示