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实现圆角效果(含IE兼容解决方法)
May 07 HTML / CSS
CSS3色彩模式有哪些?CSS3 HSL色彩模式的定义
Apr 26 HTML / CSS
关于box-sizing的全面理解
Jul 28 HTML / CSS
CSS3 filter(滤镜)实现网页灰色或者黑色模式的代码
Nov 30 HTML / CSS
你不知道的5个HTML5新功能
Jun 28 HTML / CSS
canvas三角函数模拟水波效果的示例代码
Jul 03 HTML / CSS
html5 利用重力感应实现摇一摇换颜色可用来做抽奖等等
May 07 HTML / CSS
Canvas与图片压缩的示例代码
Nov 28 HTML / CSS
详解h5页面在不同ios设备上的问题总结
Mar 01 HTML / CSS
HTML5超炫酷粒子效果的进度条的实现示例
Aug 23 HTML / CSS
CSS使用伪类控制边框长度的方法
Jan 18 HTML / CSS
HTML中的表单元素介绍
Feb 28 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开发者的10个技巧
2011/02/25 PHP
linux下编译安装memcached服务
2014/08/03 PHP
CentOS下搭建PHP环境与WordPress博客程序的全流程总结
2016/05/07 PHP
用php和jQuery来实现“顶”和“踩”的投票功能
2016/10/13 PHP
yii使用bootstrap分页样式的实例
2017/01/17 PHP
JavaScript的Function详细
2006/11/14 Javascript
改进:论坛UBB代码自动插入方式
2006/12/22 Javascript
浅谈javascript 归并方法
2015/01/21 Javascript
jQuery+ajax实现文章点赞功能的方法
2015/12/31 Javascript
Seajs 简易文档 提供简单、极致的模块化开发体验
2016/04/13 Javascript
浅析在javascript中创建对象的各种模式
2016/05/06 Javascript
Web纯前端“旭日图”实现元素周期表
2017/03/10 Javascript
vue中如何引入jQuery和Bootstrap
2017/04/10 jQuery
JavaScript 函数的定义-调用、注意事项
2017/04/16 Javascript
详解vue-cli快速构建项目以及引入bootstrap、jq
2017/05/26 Javascript
angular内置provider之$compileProvider详解
2017/09/27 Javascript
mpvue中配置vuex并持久化到本地Storage图文教程解析
2018/03/15 Javascript
nginx配置域名后的二级目录访问不同项目的配置操作
2020/11/06 Javascript
python中的一些类型转换函数小结
2013/02/10 Python
用python找出那些被“标记”的照片
2017/04/20 Python
python3使用SMTP发送HTML格式邮件
2018/06/19 Python
Python实现判断一个整数是否为回文数算法示例
2019/03/02 Python
Python中一般处理中文的几种方法
2019/03/06 Python
pandas read_excel()和to_excel()函数解析
2019/09/19 Python
tensorflow指定CPU与GPU运算的方法实现
2020/04/21 Python
浅谈Django前端后端值传递问题
2020/07/15 Python
python 监控服务器是否有人远程登录(详细思路+代码)
2020/12/18 Python
基于HTML5的WebGL实现json和echarts图表展现在同一个界面
2017/10/26 HTML / CSS
物流专业大学应届生求职信
2013/11/03 职场文书
办公室内勤工作职责
2013/12/11 职场文书
中专毕业生自我鉴定
2014/02/02 职场文书
中学家长会邀请函
2014/02/03 职场文书
学习党章的体会
2014/11/07 职场文书
个性发展自我评价2015
2015/03/09 职场文书
纯CSS实现hover图片pop-out弹出效果的实例代码
2021/04/16 HTML / CSS
Vue操作Storage本地化存储
2022/04/29 Vue.js