欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

舉例詳解CSS中的cursor屬性

鑫空間，鑫生活   發(fā)布時間：2015-06-08 16:42:37   作者：張鑫旭   我要評論
這篇文章主要舉例介紹了CSS中的cursor屬性,包括zoom-in/zoom-out和grab/grabbing等常用屬性值的使用,需要的朋友可以參考下

一、開篇之言

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

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

zoom-in/zoom-out可以讓元素的鼠標形狀變成“放大鏡”或者“放小鏡”。如下：
201568164813900.png (57×59)201568164923293.png (66×62)

于是，我們實現(xiàn)類似微博圖片查看大圖效果時候，就不需要再自己額外制作一個.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

于是，鼠標移到御用妹子身上，就會出現(xiàn)放大鏡手形，如下截圖（無關緊要區(qū)域涂白，節(jié)約大小）：
201568164944639.png (327×263)

點擊放大，再點擊縮小。

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

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

grab/grabbing可以讓元素的鼠標形狀變成“咸豬手”以及“抓奶手”，如下（截自Chrome, FireFox瀏覽器下的手要好看些）：
201568165024022.png (63×61)201568165041328.png (62×56)

此手形在實現(xiàn)內容拖拽移動的時候再合適不過了，不需額外制作一個.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

于是，你就可以上下拖拽腐女漫畫感受基愛滿滿~
201568165101973.png (497×265)

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

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

如果你有類似上面的需求，不妨漸進增強使用下瀏覽器自帶的手形。如果你的項目對瀏覽器沒有要求，比方說工具或內網(wǎng)之類，就可以很happy使用這些新特性。

相關文章

最新評論