CSS实现圆形放大镜狙击镜效果 只有圆圈里的放大


Posted in HTML / CSS onDecember 10, 2012

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

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

效果演示 

提示:您可以先修改部分代码再运行

放大一副图片
  1. 只显示其中的一个圆
  2. 圆外是透明的

图片的缩放可以通过img元素的拉伸来实现。接着盖上一张透明像素画的实心圆,因此正好只显示出放大后中心圆圈部分。但第3步可就不对了,虽然之前加盖了一张透明圆形的gif图片,屏幕上确实出现了一个放大过的圆形图片,但圆圈的外面却变成加盖图片的背景色了,因为这张图片是在最上层了。到此你或许在想给其中某些元素加些透明度什么的,事实上无论给哪个层加透明度都是徒劳的。因为此时无非就两种情况:圆圈外被背景色覆盖;背景色透明的话就是一个矩形的放大,而不是圆形。我们所希望的是:蒙版的背景色透明,并且在此位置下面的放大图也跟着透明。

对于IE来说,这并非难事,因为IE有滤镜。如果你熟悉的话应该早就想到了Chroma滤镜,这是一个很重要的滤镜,因为他能把一个层里的指定颜色变成透明色!这不正是我们期待吗。我们新建一个层,层里面分别叠上放大图片(后)和蒙版图片(前),就是为了让他们合并到这个新建层里。我们给这个新建层设置Chroma滤镜,因为他们的子层都在此合并像素了,所以圆圈外那部分背景色透明后,取而代之的就是原图片。这就是我们最终想要的效果。

值得注意的是,Chroma滤镜在给指定的蒙版背景色透明的时候,圆圈里同样的颜色也会一起透明掉,所以要给蒙版设置一个非常少见的背景色,尽可能减少圆圈里的透明像素点。

IE上面的解决方案还算简单,非IE的呢?你当然会说canvas,因为图形方面他是万能的。如果CSS上确实找不到办法,我们也只能用canvas。不过可别忘了那些非IE的主流浏览器几乎都是支持CSS3的。CSS3虽然没有像Chroma滤镜那样的效果,但是对于本例这样的效果还是绰绰有余的:因为我们只想要一个放大了的圆形图片,而CSS3天生就支持画圆。

CSS3支持层的圆角,例如border-radius:5px,就能给层的4个方角变为半径5px的圆角。我们不妨将其运用到极限,给一个100*100的层设置一个border-radius:50px圆角,这时可就是一个圆滚滚的层了!层里面的内容当然不会限制在圆角里面,但层的背景图片会。并且CSS3是支持背景图片缩放的,本例到此也就迎刃而解了。

CSS实现圆形放大镜狙击镜效果 只有圆圈里的放大

前面关键的问题都以解决,下面就实现一个狙击瞄准器的效果,并支持滚轮缩放。为了使代码更清晰,本例分别为IE,FF及其他浏览器做了3个版本,通过Demo页面能够自动转跳。

当然,如果再改进的话我们还可以用png图片作为蒙版,带上一些渐变的透明度,就更像玻璃的材质了。

HTML / CSS 相关文章推荐
CSS3 3D制作实战案例分析
Sep 18 HTML / CSS
全面解析CSS Media媒体查询使用操作(推荐)
Aug 15 HTML / CSS
一款CSS3实现多功能下拉菜单(带分享按)的教程
Nov 05 HTML / CSS
CSS3制作3D立方体loading特效
Nov 09 HTML / CSS
HTML5 Web存储方式的localStorage和sessionStorage进行数据本地存储案例应用
Dec 09 HTML / CSS
浅谈html5 响应式布局
Dec 24 HTML / CSS
详解HTML5中的拖放事件(Drag 和 drop)
Nov 14 HTML / CSS
Canvas制作旋转的太极的示例
Mar 09 HTML / CSS
手对手的教你用canvas画一个简单的海报的方法示例
Dec 10 HTML / CSS
记一次高分屏下canvas模糊问题
Feb 17 HTML / CSS
iPhoneX安全区域(Safe Area)底部小黑条在微信小程序和H5的屏幕适配
Apr 08 HTML / CSS
纯CSS实现hover图片pop-out弹出效果的实例代码
Apr 16 HTML / CSS
CSS3制作半透明边框(Facebox)类似渐变
Dec 09 #HTML / CSS
CSS伪类与CSS伪元素的区别及由来具体说明
Dec 07 #HTML / CSS
用CSS禁用输入法(CSS3 UI规范)实例解析
Dec 04 #HTML / CSS
html5 css3 动态气泡按钮实例演示
Dec 02 #HTML / CSS
IE矩阵Matrix滤镜旋转与缩放及如何结合transform
Nov 29 #HTML / CSS
CSS3悬停效果案例应用
Nov 21 #HTML / CSS
在css3中background-clip属性与background-origin属性的用法介绍
Nov 13 #HTML / CSS
You might like
php auth_http类库进行身份效验
2009/03/19 PHP
浅析Yii中使用RBAC的完全指南(用户角色权限控制)
2013/06/20 PHP
extjs实现选择多表自定义查询功能 前台部分(ext源码)
2011/12/20 Javascript
js检查页面上有无重复id的实现代码
2013/07/17 Javascript
IE6 hack for js 集锦
2014/09/23 Javascript
JavaScript中的方法重载实例
2015/03/16 Javascript
js实现简单锁屏功能实例
2015/05/27 Javascript
浅谈javascript的Array.prototype.slice.call
2015/08/31 Javascript
浅谈javascript函数式编程
2015/09/06 Javascript
浅谈JS原生Ajax,GET和POST
2016/06/08 Javascript
javascript日期比较方法实例分析
2016/06/17 Javascript
Bootstrap Metronic完全响应式管理模板之菜单栏学习笔记
2016/07/08 Javascript
js Canvas绘制圆形时钟教程
2017/02/06 Javascript
AngularJS解决ng-if中的ng-model值无效的问题
2017/06/21 Javascript
使用Ajax和Jquery配合数据库实现下拉框的二级联动的示例
2018/01/25 jQuery
小程序登录/注册页面设计的实现代码
2019/05/24 Javascript
怎么使用javascript深度拷贝一个数组
2019/06/06 Javascript
JavaScript的查询机制LHS和RHS解析
2019/08/16 Javascript
[14:20]刀塔大凶女神互压各路奇葩屌丝
2014/05/16 DOTA
python实现简单遗传算法
2018/03/19 Python
Django中间件实现拦截器的方法
2018/06/01 Python
python递归实现快速排序
2018/08/18 Python
Python实现的爬取小说爬虫功能示例
2019/03/30 Python
Python爬虫JSON及JSONPath运行原理详解
2020/06/04 Python
IE下实现类似CSS3 text-shadow文字阴影的几种方法
2011/05/11 HTML / CSS
HTML5 weui使用笔记
2019/11/21 HTML / CSS
日常奢侈品,轻松购物:Verishop
2019/08/20 全球购物
Java平台和其他软件平台有什么不同
2015/06/05 面试题
迎国庆横幅标语
2014/10/08 职场文书
大学生学习新党章思想汇报
2014/10/25 职场文书
2015年医院创卫工作总结
2015/04/22 职场文书
如何写通讯稿
2015/07/22 职场文书
个人合作协议范本
2015/08/06 职场文书
《猴王出世》教学反思
2016/02/23 职场文书
Nginx源码编译安装过程记录
2021/11/17 Servers
MySQL中dd::columns表结构转table过程及应用详解
2022/09/23 MySQL