用CSS制作一個圓形放大鏡

2020-03-24 19:03:10

字體：大中小

來源：轉載

供稿：網友

話說圖片放大，這是一個再容易不過的效果了。當然，今天說的可不是簡簡單單的在一個框里放大，而是一個圓。就像放大鏡或是狙擊鏡那樣，只有圓圈里的放大，圈外的當然還是原來的圖片。這是不是很不可思議？當然不是。做過Flash的也許會脫口而出：套個蒙版就是了。可惜CSS不是Flash，沒有那一套。我們只有從CSS里面慢慢挖掘。先說IE，因為IE有濾鏡，可以實現許多意想不到的功能。先來整理下我們的目標：
1.放大一副圖片
2.只顯示其中的一個圓
3.圓外是透明的圖片的縮放可以通過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頁面能夠自動轉跳html教程

鄭重聲明：本文版權歸原作者所有，轉載文章僅為傳播更多信息之目的，如作者信息標記有誤，請第一時間聯系我們修改或刪除，多謝。

上一篇：用CSS讓DIV層水平居中

下一篇：html5+css3實現一款注冊表單實例