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

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

放大一副图片

只显示其中的一个圆

圆外是透明的

图片的缩放可以通过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是支持背景图片缩放的，本例到此也就迎刃而解了。

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

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

放大镜css图标,CSS放大镜的制作相关推荐

  1. css 右上角 翻开动画_css制作电闪雷鸣的天气图标

    css制作电闪雷鸣的天气图标 效果图如下 实现思路 使用box-shadow属性写几个圆,将这些圆错落的组合在一起,形成云朵图案 after伪元素写下面的投影样式 before伪元素写黄色闪电的样式 ...

  2. js+css+html实现放大镜效果

    js+css+html实现放大镜效果 1 案例描述 2 编写HTML代码 3 编写CSS代码 4 编写JavaScript代码 5 总代码 1 案例描述 在很多网页中,我们都能看到一个类似于放大镜的效 ...

  3. Html+css+js实现放大镜功能（详细完整代码）

    通过将鼠标指向指定的图片,将鼠标移动到图片时,显示一个透明的小区域,然后将小区域的部分放大,查看细节. 运行效果:  详细代码: <!DOCTYPE html> <html>& ...

  4. html中怎么写小箭头,HTML+CSS入门 CSS用伪类制作小箭头

    本篇教程介绍了HTML+CSS入门 CSS用伪类制作小箭头,希望阅读本篇文章以后大家有所收获,帮助大家HTML+CSS入门. < 本文对轮播图左右按钮的处理方法一改往常,不是简单地用btn.pr ...

  5. [css] 用css实现一个等腰三角形的小图标

    [css] 用css实现一个等腰三角形的小图标 <style>.box{width: 0;height: 0;margin: 100px auto;border-width: 0px 20 ...

  6. 一个标签的72变，打造一个纯CSS图标库

    每次要用到图标的时候都会到 icono 去copypaste,但每次用到的时候尺寸都各不一样,总是要调整参数,巨烦.当然你可以会想到用zoom.scale来做缩放,但是这样的缩放会使得线宽也变粗了,不 ...

  7. html css图标怎么跟文字并排,科技常识：css图标与文字对齐的两种实现方法

    今天小编跟大家讲解下有关css图标与文字对齐的两种实现方法 ,相信小伙伴们对这个话题应该有所关注吧,小编也收集到了有关css图标与文字对齐的两种实现方法 的相关资料,希望小伙伴们看了有所帮助. 在平时 ...

  8. 背景的css代码,CSS网页设计实例:设计制作大背景网页_css

    网页制作Webjx文章简介:如何用css实现大背景网页设计. 自从我发布了大背景网页设计合集之后,我收到了很多电子邮件询问如何用css实现大背景的网页设计.因此我决定和大家分享大背景网站的设计技巧.在 ...

  9. css动画在线生成,在线制作css动画——cssanimate

    熟悉CSS的人都知道,CSS可以实现很多漂亮的动画,特别是它的在线功能,能够帮助人们解决很多制作动画的效果.今天特别推荐一个在线CSS插件功能--cssanimate,这个最大的特色就是以图形界面方式 ...

  10. CSS+html:天涯网页仿照制作

     CSS+html:天涯网页仿照制作 <!DOCTYPE html> <html> <head lang="en"><meta cha ...

最新文章

  1. ASP.NET MVC 2示例Tailspin Travel
  2. 3DMAX 批量 场景 对象 导出 .X格式 脚本
  3. EXP/EXPDP, IMP/IMPDP应用
  4. linux系统中怎么驱动U盘
  5. tomcat+nginx+redis实现均衡负载、session共享
  6. 推荐一首歌，个人感觉不错...
  7. 001_深度剖析什么是 SLI、SLO和SLA？
  8. gitlab创建分支上传文件_代码管理-gitlab使用方法建议
  9. 动态规划—最长公共子序列LCS及模板
  10. 20.看板方法---问题管理和升级策略
  11. 腾讯 QQ for Linux 的安装及 tar.gz版本QQ 建立快捷方式
  12. Python 学习笔记-＞《流畅python》学习
  13. label confusion learning to enhance text classification models
  14. 纪念日该给女朋友送什么礼物？
  15. Source Insight设置黑色背景
  16. Easyx-----c语言实现图形化打砖块
  17. 刻录光盘不求人Nero刻录软件使用教程
  18. 【C语言】求N的阶乘
  19. 公司要抽奖活动？50行Python代码制作了一个转盘抽奖小程序
  20. 【3153万】巴菲特午餐再创天价！细数曾与股神共进午餐的中国大佬丨湾区人工智能...

热门文章

  1. 逆clarke变换_克拉克(CLARKE)和帕克(PARK)变换
  2. 如何弄ad装配图_AD打印装配图的细节
  3. 万能视频格式转换器 v 2018 全能版
  4. 电气专业标准规范大全html,电气专业规范大全
  5. 关闭445端口方法（解决永恒之蓝病毒）
  6. pd虚拟机专用windows系统镜像(m1/intel)「新增：Intel Mac win7专业版懒人包镜像」
  7. jquery第三章练习三（制作京东常见问题分类页面）
  8. 三星S7edge番茄花园ROM
  9. Vue 常用前端UI框架
  10. h5打开app指定页面，有则打开，无则下载