前端开发常用 基于CSS3 Transitions实现的鼠标经过图标悬停特效

web前端开发java|前端html5开发是干嘛的|前端开发js插件

今天给大家分享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代码：

<style>

    .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);

        }

    }

</style>