简单的圆形图标鼠标hover效果 | CSS3教程

时间:2022-08-31 15:58:14

演示

本教程将和大将分享一些简单的圆形图标在鼠标hover时的动画效果。这种效果在不少时尚的酷站上都有。本教程中的例子主要是利用在a元素的伪元素上使用CSS transitions和animations来制作。图标的创建将使用IcoMoon app来完成。

注意:不是每一个浏览器都支持伪元素,最好是使用Chrome或Firefox浏览器观看。

HTML结构:

图标组的结构是使用一个div包含一组a元素,给每个a元素设置图标class。

<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>

CSS样式:

下面的样式是鼠标hover时,圆形图标旋转的效果。

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

注意:第四个例子中使用伪元素制作虚线边框的效果在FF 21.0中看不到效果。

其它各种效果请参考下载的css文件,都非常简单。

本教程就到这里,希望对你有所帮助。

本文版权属于jQuery之家,转载请注明出处:http://www.htmleaf.com/ziliaoku/qianduanjiaocheng/20141028314.html