CSS中的cursor屬性實(shí)例用法

本篇內(nèi)容介紹了“CSS中的cursor屬性實(shí)例用法”的有關(guān)知識，在實(shí)際案例的操作過程中，不少人都會遇到這樣的困境，接下來就讓小編帶領(lǐng)大家學(xué)習(xí)一下如何處理這些情況吧！希望大家仔細(xì)閱讀，能夠?qū)W有所成！

成都創(chuàng)新互聯(lián)公司專注于東昌府企業(yè)網(wǎng)站建設(shè),響應(yīng)式網(wǎng)站開發(fā),商城網(wǎng)站開發(fā)。東昌府網(wǎng)站建設(shè)公司,為東昌府等地區(qū)提供建站服務(wù)。全流程定制制作，專業(yè)設(shè)計(jì)，全程項(xiàng)目跟蹤，成都創(chuàng)新互聯(lián)公司專業(yè)和態(tài)度為您提供的服務(wù)

一、開篇之言

CSS3的領(lǐng)域范圍已經(jīng)滲透到了cursor屬性（鼠標(biāo)手形）。這里簡單介紹兩個相當(dāng)實(shí)用的組合zoom-in/zoom-out以及grab/grabbing.

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

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

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

CSS Code復(fù)制內(nèi)容到剪貼板

1. .zoom-in {   

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

3. }   

4. .zoom-out {   

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

6. }  

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

于是，鼠標(biāo)移到御用妹子身上，就會出現(xiàn)放大鏡手形，如下截圖（無關(guān)緊要區(qū)域涂白，節(jié)約大?。?br/>

點(diǎn)擊放大，再點(diǎn)擊縮小。

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

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

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

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

CSS Code復(fù)制內(nèi)容到剪貼板

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. }  

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

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

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

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

“CSS中的cursor屬性實(shí)例用法”的內(nèi)容就介紹到這里了，感謝大家的閱讀。如果想了解更多行業(yè)相關(guān)的知識可以關(guān)注創(chuàng)新互聯(lián)網(wǎng)站，小編將為大家輸出更多高質(zhì)量的實(shí)用文章！

當(dāng)前題目：CSS中的cursor屬性實(shí)例用法
URL鏈接：http://bm7419.com/article30/jcidpo.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供網(wǎng)站設(shè)計(jì)公司、網(wǎng)站建設(shè)、企業(yè)網(wǎng)站制作、動態(tài)網(wǎng)站、服務(wù)器托管、網(wǎng)站設(shè)計(jì)

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源： 創(chuàng)新互聯(lián)