前端开发常用 基于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>
mac下前端开发环境搭建|开发前端的ide|前端开发要学xhtml吗
» 本文来自:前端开发者 » 《前端开发常用 基于CSS3 Transitions实现的鼠标经过图标悬停特效》
» 本文链接地址:https://www.rokub.com/4672.html
» 您也可以订阅本站:https://www.rokub.com
赞(0)
64K

评论 抢沙发

评论前必须登录!