CSS中的cursor屬性實例用法

本篇內容介紹了“CSS中的cursor屬性實例用法”的有關知識，在實際案例的操作過程中，不少人都會遇到這樣的困境，接下來就讓小編帶領大家學習一下如何處理這些情況吧！希望大家仔細閱讀，能夠學有所成！

一、開篇之言

CSS3的領域范圍已經滲透到了cursor屬性（鼠標手形）。這里簡單介紹兩個相當實用的組合zoom-in/zoom-out以及grab/grabbing.

本文重在展示，開闊眼界。
二、zoom-in/zoom-out組合

zoom-in/zoom-out可以讓元素的鼠標形狀變成“放大鏡”或者“放小鏡”。如下：

于是，我們實現類似微博圖片查看大圖效果時候，就不需要再自己額外制作一個.cur文件了，直接如下寥寥CSS代碼即可：

CSS Code復制內容到剪貼板

1. .zoom-in {   

2.     cursor: zoom-in; /* 大大大 */  

3. }   

4. .zoom-out {   

5.    cursor: zoom-out; /* 小小小 */  

6. }  

您可以狠狠地點擊這里：cursor屬性之zoom-in/zoom-out值測試demo

于是，鼠標移到御用妹子身上，就會出現放大鏡手形，如下截圖（無關緊要區域涂白，節約大小）：

點擊放大，再點擊縮小。

兼容性
目前， 除了IE瀏覽器（包括IE11），PC端的其他瀏覽器全線支持zoom-in/zoom-out。

貌似Safari還需要私有前綴。
三、grab/grabbing組合

grab/grabbing可以讓元素的鼠標形狀變成“咸豬手”以及“抓奶手”，如下（截自Chrome, FireFox瀏覽器下的手要好看些）：

此手形在實現內容拖拽移動的時候再合適不過了，不需額外制作一個.cur文件了，直接如下寥寥CSS代碼即可：

CSS Code復制內容到剪貼板

1. .grab { /* 抓抓抓 */  

2.     cursor: -webkit-grab;   

3.     cursor: -moz-grab;   

4.     cursor: grab;   

5. }   

6. .grabbing { /* 抓住抓住 */  

7.     cursor: -webkit-grabbing;   

8.     cursor: -moz-grabbing;   

9.     cursor: grabbing;   

10. }  

您可以狠狠地點擊這里：cursor屬性之grab/grabbing值測試demo

于是，你就可以上下拖拽腐女漫畫感受基愛滿滿~

兼容性
目前， 除了IE瀏覽器（包括IE11），PC端的其他瀏覽器全線支持grab/grabbing.

但是，現在這些瀏覽器還需要添加私有前綴。

“CSS中的cursor屬性實例用法”的內容就介紹到這里了，感謝大家的閱讀。如果想了解更多行業相關的知識可以關注億速云網站，小編將為大家輸出更多高質量的實用文章！