整合營銷服務(wù)商
電腦端+手機端+微信端=數(shù)據(jù)同步管理
免費咨詢熱線：
電腦端+手機端+微信端=數(shù)據(jù)同步管理
免費咨詢熱線：
果圖
各位長友，大家好！
今天給大家?guī)淼脑创a是 13款鼠標劃過特效CSS3樣式源碼！
大家可以自己搭配修改，應(yīng)用到自己的項目中！
有想要文件版源碼的朋友 可以來我的HTML5學習交流：581549454 里面都是做前端開發(fā)的，拒絕賣課和廣告！純學習交流，每天會上傳一些優(yōu)秀的作品和源碼，歡迎初學者和大神們。
廢話不多說，上源碼！
@import url(http://fonts.googleapis.com/css?family=Raleway:400,500,700,900|Dosis:800|Playfair+Display:400,400italic,900italic|Lora:700|Syncopate:700|Roboto+Condensed:300italic|Oswald:700);
@font-face {
font-weight: normal;
font-style: normal;
font-family: 'codropsicons';
src:url('../fonts/codropsicons/codropsicons.eot');
src:url('../fonts/codropsicons/codropsicons.eot?#iefix') format('embedded-opentype'),
url('../fonts/codropsicons/codropsicons.woff') format('woff'),
url('../fonts/codropsicons/codropsicons.ttf') format('truetype'),
url('../fonts/codropsicons/codropsicons.svg#codropsicons') format('svg');
}
css鏈接
鏈接可以使用任何css屬性(例如,color,font-family,background等)來設(shè)置樣式.
另外,鏈接的樣式可以不同,具體取決于所處的狀態(tài).以下偽選擇器可用:
a:link 定義正常的為訪問鏈接的樣式
a:visited 定義訪問鏈接的樣式
a:active 一旦點擊鏈接,鏈接就會激活
a:hover 當鼠標懸停時,鏈接的樣式
下面的例子,創(chuàng)建一個鏈接,當鼠標移動到它上面的時候會改變樣式
html代碼:
<p><a target="_blank">搜狗</a></p>
css代碼:
a:hover{ color:red; }
執(zhí)行結(jié)果如下:
這是鼠標移動到鏈接上時,顯示的樣式
當為鏈接設(shè)置樣式時,必須遵守以下規(guī)則:
a:hover 必須在a:link和a:visited之后
a:active 必須在a:hover之后
默認情況下,文本鏈接由瀏覽器加下劃線.
處理帶鏈接的文本,css最常見的用法之一是刪除下劃線.在下面的示例中,text-decoration屬性用于刪除下劃線.
html代碼:
<p><a class="text-decoration" href="https:www.sougou.com">我的下劃線已經(jīng)被刪除了!</a></p>
css代碼:
a.text-decoration:link{text-decoration:none;}
效果如下:
以下屬性用于控制鏈接的樣式:
border:none 從包含鏈接的圖像中刪除邊框
outline:none 刪除IE中點擊鏈接行上的虛線邊框
二 css自定義鼠標光標樣式
css允許你將鼠標懸停在元素上時,設(shè)置所需的光標樣式.例如,你可以將光標更改為手形圖標,幫助圖標等.而不是默認的指針.
在下面的例子中,當我們將鼠標移動到span元素上時,鼠標指針被設(shè)置為一個幫助圖標.(cursor就是光標的意思)
<span style="cursor:help;">需要幫忙么?</span>
效果如下:
cursor屬性還有許多其他的值.例如:
default:默認光標
crosshair:光標顯示為十字準線
pointer:光標顯示為手形圖標
cursor的值比較多,用圖片顯示給大家:
通常改變鼠標光標的外觀,是為了提高網(wǎng)站訪問者的體驗.但是,選擇錯誤的光標風格也可能會引起誤解.
果你想讓你的網(wǎng)站看起來更酷炫，可以改變鼠標樣式，用你喜歡的圖片來代替。
下面就來介紹下步驟方法：
首頁把鼠標圖標格式轉(zhuǎn)換成.ico格式，大小為32*32
轉(zhuǎn)換格式網(wǎng)址為：https://www.easyicon.net/covert/
然后在CSS樣式中增加代碼：
*{
cursor:url(../images/shubiao.ico),auto;
}
大功告成啦~~~
說明：
歡迎大家多多留言討論，如有錯誤請大神指教，如果你是小白也可以私信“資料”領(lǐng)取前端學習資料一起學習
*請認真填寫需求信息，我們會在24小時內(nèi)與您取得聯(lián)系。
