>  기사  >  웹 프론트엔드  >  9款基于CSS3 Transitions实现的鼠标经过图标悬停特效_html/css_WEB-ITnose

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

WBOY
WBOY원래의
2016-06-24 11:49:431180검색

之前给大家分享了很多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>

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://www.w2bc.com/Article/20379

성명:
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.