本文轉載於:猿2048網站用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樣式寫法如下：

 1 .zoom-in{
 2     cursor: -moz-zoom-in;
 3     cursor: -webkit-zoom-in;
 4     cursor: zoom-in;
 5     cursor: url(../images/big.cur);
 6 }
 7 .zoom-out{
 8     cursor: -moz-zoom-out;
 9     cursor: -webkit-zoom-out;
10     cursor: zoom-out;
11     cursor: url(../images/small.cur);
12 }

效果可以點選這裡檢視 點選圖片在頁面居中顯示

3.延伸 
與這個屬性值差不多的另一個cursor：grab/grabbing.這個是讓元素的滑鼠形狀變成手狀，張大大說過，俗稱“鹹豬手”和“抓奶手”.(不是我說的); 
這個主要用在實現拖拽和移動內容這種效果的時候；有了這個屬性，就比較方便了 
圖片效果如下： 

css程式碼如下（如果要做瀏覽器相容，還是那樣，得加個.cur檔案了）

 1 .grab { /* 抓 */
 2     cursor: -webkit-grab;
 3     cursor: -moz-grab;
 4     cursor: grab;
 5     cursor: url(../images/grab.cur);
 6 }
 7 .grabbing { /* 抓住拖動 */
 8     cursor: -webkit-grabbing;
 9     cursor: -moz-grabbing;
10     cursor: grabbing;
11     cursor: url(../images/grabbing.cur);
12 }

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