CSS3 Web Page Production Example: the mouse through the icon animation effect

Article Introduction: today to share a group of stylish and simple mouse animation effect of the icon. The main principle is that when the icon or trigger its pseudo elements, the use of CSS transitions and animations properties, to achieve some of the interactive animation effect. Before this, the site also introduced a lot of CSS artifacts of the article, such as: Animation fringe borders, pseudo elements of multiple choice, the production of fashion focus

Today to share a group of stylish and simple mouse animation effect of the icon. The main principle is that when the icon or trigger its pseudo elements, the use of CSS transitions and animations properties, to achieve some of the interactive animation effect. Before this, the site also introduced a lot of CSS artifacts of the article, such as: Animation fringe borders, pseudo elements of multiple selection, the production of fashion focus picture frame and so on.

Building HTML Infrastructure

The HTML structure used in this example is extremely simple, with a few strokes in a large div container, with CSS style control to produce a variety of effects, as follows:

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

Example of a simple animation effect

This is just one of the examples in this article (6), and the main effect is to rotate the animation.

. hi-icon-effect-6. Hi-icon {
box-shadow:0 0 0 4px Rgba (255,255,255,1);

}

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

The above code, as long as you are familiar with the transitions and animations these two tags, it is easy to understand. When the mouse passes through the. hi-icon-effect-6. Hi-icon, the background turns white Rgba (255,255,255,1), and then the animation rotates transform:rotate () 360 degrees. Other examples, you can download the attachment, take a good look at the code.

Code Download: Http://www.webjx.com/files/soft/1_130710104925.zip

In fact, CSS3 animation effect is so simple, only need to give him the corresponding attribute values and transform rules. Then enjoy this group of simple mouse after the animation effect bar. Hope can bring you enlightenment.