9款基于CSS3 Transitions实现的鼠标经过图标悬停特效_html/css_WEB-ITnose

WBOY
Freigeben: 2016-06-24 11:49:43
Original
1200 Leute haben es durchsucht

之前给大家分享了很多css3实现的按钮特效。今天给大家分享9款基于CSS3 Transitions实现的鼠标经过图标悬停特效。这款特效适用浏览器:360、FireFox、Chrome、Safari、Opera、傲游、搜狗、世界之窗. 不支持IE8及以下浏览器。效果图如下:

在线预览   源码下载

实现的代码。

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>
Nach dem Login kopieren

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);    }}
Nach dem Login kopieren

via:http://www.w2bc.com/Article/20379

Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage