用css3的cursor:zoom-in/zoom-out實現微博看圖片放大鏡效果

1.前言

CSS3的出現解決了很多讓人頭疼的問題，至少我想很多童鞋都這樣認為。css3的cursor屬性大家用的應該是非常的多的，我想用的比較多的像cursor:pointer;cursor:help;cursor:text;等等。很少人用到cursor:zoom-in/zoom-out;今天就來講一下這兩個屬性值的用法。

2.簡介

cursor的定義和用法

cursor屬性規定要顯示的游標和類型（形狀）。定義了滑鼠指針放在一個元素邊界範圍內時所用的游標形狀。默認值是auto;大部分常用的值有以下：

部分游標參考圖片如下：

zoom-in/zoom-out 就是讓元素的滑鼠形狀變成「放大鏡」/「放小鏡」的效果；如下圖：

有了這個屬性，我們就不用自己製作一個.cur的放大鏡文件和.cur的放小鏡文件了，直接用該屬性就可以代替了。不過此屬性IE11（包括IE11）不支持，其他遊覽器倒是都支持。如果你的項目要求兼容性非常高，那還得搞兩個.cur的文件了

具體css樣式寫法如下：

3.延伸

與這個屬性值差不多的另一個cursor：grab/grabbing.這個是讓元素的滑鼠形狀變成手狀，張大大說過，俗稱「咸豬手」和「抓奶手」.(不是我說的);

這個主要用在實現拖拽和移動內容這種效果的時候；有了這個屬性，就比較方便了

css代碼如下（如果要做瀏覽器兼容，還是那樣，得加個.cur文件了）

4.總結

css3有很多好的屬性，用起來方便的不要不要的。而且效果還挺高大上的。所以大家要多看看css3.學習無止境！大家要共勉！

更多IT精品課程，訪問中公優就業官網：http://xue.ujiuye.com

勤工儉學計劃」，給你一個真正0元學習IT技術的機會！

http://www.ujiuye.com/zt/qgjx/?wt.bd=lsh

找工作太難？不是你不行，我們來幫你！

http://www.ujiuye.com/zt/jyfc/?wt.bd=lsh

喜歡這篇文章嗎？立刻分享出去讓更多人知道吧！