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

(编辑：jimmy 日期: 2024/11/1 浏览：2)

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

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

效果演示

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"><title>CSS放大将效果</title><style>html, body { border: none; overflow: hidden;}body { background: url(//img.jbzj.com/file_images/article/201212/201212101129555.jpg); cursor: crosshair;}#divBox { position: absolute;}#divBox * { position: absolute;}#divMask { width: 160px; height: 160px; border-radius: 80px; background: #000 url(//img.jbzj.com/file_images/article/201212/201212101129555.jpg) no-repeat;}#divZoom { width: 100px; left: 60px; top: 135px; font-size: 9px; font-family: "Times New Roman"; -webkit-text-size-adjust: none; color: #FFF;}</style></head><body ondragstart="return false"><div id="divBox" style="left: 720px; top: 218px; ">  <div id="divMask" style="background-size: 2560px 1600px; background-position: -1520px -516px; "></div>  <img src="/UploadFiles/2021-03-30/201212101129556.gif"><br><input class="fn-butt" type="button" value="运行代码" onclick="runCode('runcode1')"> <input class="fn-butt" type="button" value="复制代码" onclick="copy2(runcode1)"> <input class="fn-butt" type="button" value="另存代码" onclick="saveCode(runcode1)">  提示：您可以先修改部分代码再运行<br>放大一副图片
<ol>
    <li>只显示其中的一个圆 </li>
    <li>圆外是透明的 </li>
</ol>
<p>图片的缩放可以通过img元素的拉伸来实现。接着盖上一张透明像素画的实心圆，因此正好只显示出放大后中心圆圈部分。但第3步可就不对了，虽然之前加盖了一张透明圆形的gif图片，屏幕上确实出现了一个放大过的圆形图片，但圆圈的外面却变成加盖图片的背景色了，因为这张图片是在最上层了。到此你或许在想给其中某些元素加些透明度什么的，事实上无论给哪个层加透明度都是徒劳的。因为此时无非就两种情况：圆圈外被背景色覆盖；背景色透明的话就是一个矩形的放大，而不是圆形。我们所希望的是：蒙版的背景色透明，并且在此位置下面的放大图也跟着透明。</p>
<p>对于IE来说，这并非难事，因为IE有滤镜。如果你熟悉的话应该早就想到了Chroma滤镜，这是一个很重要的滤镜，因为他能把一个层里的指定颜色变成透明色！这不正是我们期待吗。我们新建一个层，层里面分别叠上放大图片(后)和蒙版图片(前)，就是为了让他们合并到这个新建层里。我们给这个新建层设置Chroma滤镜，因为他们的子层都在此合并像素了，所以圆圈外那部分背景色透明后，取而代之的就是原图片。这就是我们最终想要的效果。</p>
<p>值得注意的是，Chroma滤镜在给指定的蒙版背景色透明的时候，圆圈里同样的颜色也会一起透明掉，所以要给蒙版设置一个非常少见的背景色，尽可能减少圆圈里的透明像素点。</p>
<p>IE上面的解决方案还算简单，非IE的呢？你当然会说canvas，因为图形方面他是万能的。如果CSS上确实找不到办法，我们也只能用canvas。不过可别忘了那些非IE的主流浏览器几乎都是支持CSS3的。CSS3虽然没有像Chroma滤镜那样的效果，但是对于本例这样的效果还是绰绰有余的：因为我们只想要一个放大了的圆形图片，而CSS3天生就支持画圆。</p>
<p>CSS3支持层的圆角，例如border-radius:5px，就能给层的4个方角变为半径5px的圆角。我们不妨将其运用到极限，给一个100*100的层设置一个border-radius:50px圆角，这时可就是一个圆滚滚的层了！层里面的内容当然不会限制在圆角里面，但层的背景图片会。并且CSS3是支持背景图片缩放的，本例到此也就迎刃而解了。</p>
<a href="javascript:;" onclick="showimg('/UploadFiles/2021-03-30/201212101129557.png');"><img src="/UploadFiles/2021-03-30/201212101129557.png" alt="CSS实现圆形放大镜狙击镜效果 只有圆圈里的放大" onmousewheel="return bbimg(this)" onload="javascript:resizepic(this)" border="0"/></a>
<p>前面关键的问题都以解决，下面就实现一个狙击瞄准器的效果，并支持滚轮缩放。为了使代码更清晰，本例分别为IE，FF及其他浏览器做了3个版本，通过Demo页面能够自动转跳。</p>
<p>当然，如果再改进的话我们还可以用png图片作为蒙版，带上一些渐变的透明度，就更像玻璃的材质了。</p></div>
</div>
        <div class="reLink clearfix">
            <div class="prevLink fl">上一篇：<a href="http://m.wosibo.com/show/1/73694.html" title="CSS样式权重的级联cascade的概念深入理解">CSS样式权重的级联cascade的概念深入理解</a></div>
            <div class="nextLink fl">下一篇：<a href="http://m.wosibo.com/show/1/73696.html" title="IE对标准的支持不够好导致CSS渲染跟其它浏览器有什么不同">IE对标准的支持不够好导致CSS渲染跟其它浏览器有什么不同</a></div>
        </div>
    </section>
    
    <div class="otherlink">
        <h2>最新资源</h2>
        <ul>
             
<li><a href="/show/1/628779.html" title="《暗喻幻想》评测：于后偏铝酸钠时代升起的新星">《暗喻幻想》评测：于后偏铝酸钠时代升起的新星</a></li>
 
<li><a href="/show/1/628778.html" title="《琥珀岛》评测：采集、经营和建造的多拼套餐">《琥珀岛》评测：采集、经营和建造的多拼套餐</a></li>
 
<li><a href="/show/1/628777.html" title="《直到黎明》重制版评测：谁买谁是冤大头">《直到黎明》重制版评测：谁买谁是冤大头</a></li>
 
<li><a href="/show/1/628776.html" title="HOYO-MiX《崩坏3-逝去时光的海洋》[320K/MP3][8">HOYO-MiX《崩坏3-逝去时光的海洋》[320K/MP3][8</a></li>
 
<li><a href="/show/1/628775.html" title="HOYO-MiX《崩坏3-逝去时光的海洋》[FLAC/分轨][">HOYO-MiX《崩坏3-逝去时光的海洋》[FLAC/分轨][</a></li>
 
<li><a href="/show/1/628774.html" title="Dragon Beauties小龙女《爱的奇迹》[320K/MP3][">Dragon Beauties小龙女《爱的奇迹》[320K/MP3][</a></li>
 
<li><a href="/show/1/628773.html" title="魔兽世界奥杜尔团本竞速赛奖金有多少 奥杜尔团本">魔兽世界奥杜尔团本竞速赛奖金有多少 奥杜尔团本</a></li>
 
<li><a href="/show/1/628772.html" title="暗喻幻想大沙虫巢穴怎么过 暗喻幻想大沙虫巢穴收">暗喻幻想大沙虫巢穴怎么过 暗喻幻想大沙虫巢穴收</a></li>
 
<li><a href="/show/1/628771.html" title="暗喻幻想食人洞穴怎么过 暗喻幻想食人洞穴收集攻">暗喻幻想食人洞穴怎么过 暗喻幻想食人洞穴收集攻</a></li>
 
<li><a href="/show/1/628770.html" title="锦绣二重唱《情比姊妹深》[原抓WAV+CUE]">锦绣二重唱《情比姊妹深》[原抓WAV+CUE]</a></li>

</ul>
    </div>
    <div id="returntop" class="icon hidden"></div>
    <footer id="footer_main">
        <div id="copyright">
            <p>友情链接:<a href="http://www.imxmx.com/" title="杰晶网络" target="_blank">杰晶网络</a> <a href="http://www.ddrfans.com/" title="DDR爱好者之家" target="_blank">DDR爱好者之家</a> <a href="http://www.nqxw.com/" title="南强小屋" target="_blank">南强小屋</a> <a href="http://www.paidiu.com/" title="黑松山资源网" target="_blank">黑松山资源网</a> <a href="http://www.dyhadc.com/" title="白云城资源网" target="_blank">白云城资源网</a> <a href="/sitemap.xml">SiteMap</a></p>
            <p>Copyright © 2006-2023 天枫庄资源网 All Rights Reserved.</p>
            <p>手机版：<a href="http://m.wosibo.com/" target="_blank">m.wosibo.com</a></p>
        </div>
    </footer>
    <section id="toolbar">
        <ul class="list clearfix">
            <li><a href="/" title="首页"><s class="icon"></s><span>首页</span></a></li>
            <li><a href="/list/1554.html" title="音乐"><s class="icon"></s><span>音乐</span></a></li>
            <li><a href="/list/1557.html" title="电影"><s class="icon"></s><span>电影</span></a></li>
            <li><a href="/list/1587.html" title="资源"><s class="icon"></s><span>资源</span></a></li>
        </ul>
    </section>
    <script type="text/javascript" src="/js/autofontsize.min.js"></script>
    <script type="text/javascript" src="/js/jquery.js"></script>
    <script type="text/javascript" src="/js/clipboard.min.js"></script>
    <script type="text/javascript" src="/js/app.js"></script>
</body>

</html>

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

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