Simple circular icon mouse hover effect | CSS3 Tutorials

Demonstrate

This tutorial will share with the general the animated effect of some simple circular icons on mouse hover. This effect is found in many fashionable cool stations. The examples in this tutorial are a made using CSS transitions and animations on pseudo elements of elements. The creation of the icon will be done using the Icomoon app.

Note: Not every browser supports pseudo-elements, preferably viewed using Chrome or Firefox browser. HTML structure:

The structure of an icon group is div to use an a icon class that contains a set of elements for each a element.

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

The following style is the effect of the circular icon rotation when the mouse 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);    }}

Note: The effect of creating a dashed border with a pseudo element in the fourth example is not visible in FF 21.0.

For all the other effects please refer to the downloaded CSS file, which is very simple.

This tutorial is here and I hope to help you.

This article copyright belongs to the House of jquery, reprint please indicate source: http://www.htmleaf.com/ziliaoku/qianduanjiaocheng/20141028314.html

Simple circular icon mouse hover effect | CSS3 Tutorials