之前給大家分享了很多css3實現(xiàn)的按鈕特效。今天給大家分享9款基于CSS3 Transitions實現(xiàn)的鼠標(biāo)經(jīng)過圖標(biāo)懸停特效。這款特效適用瀏覽器：360、FireFox、Chrome、Safari、Opera、傲游、搜狗、世界之窗. 不支持IE8及以下瀏覽器。效果圖如下：

在線預(yù)覽???源碼下載

實現(xiàn)的代碼。

html代碼：

<div class="hi-icon-wrap hi-icon-effect-1 hi-icon-effect-1a"><a href="#" class="hi-icon hi-icon-mobile">Mobile</a><a href="#" class="hi-icon hi-icon-screen">Desktop</a><a href="#" class="hi-icon hi-icon-earth">Partners</a><a href="#" class="hi-icon hi-icon-support">Support</a><a href="#" class="hi-icon hi-icon-locked">Security</a> </div>

css3代碼：

.hi-icon-effect-6 .hi-icon {box-shadow: 0 0 0 4px rgba(255,255,255,1);transition: background 0.2s, color 0.2s; }.no-touch .hi-icon-effect-6 .hi-icon:hover {background: rgba(255,255,255,1);color: #64bb5d; }.no-touch .hi-icon-effect-6 .hi-icon:hover:before {animation: spinAround 2s linear infinite; }@keyframes spinAround {from {transform: rotate(0deg)}to {transform: rotate(360deg);} }

via：http://***/Article/20379

總結(jié)

以上是生活随笔為你收集整理的9款基于CSS3 Transitions实现的鼠标经过图标悬停特效的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。