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

Source: Internet
Author: User
Tags touch

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.



Related Article

Alibaba Cloud 10 Year Anniversary

With You, We are Shaping a Digital World, 2009-2019

Learn more >

Apsara Conference 2019

The Rise of Data Intelligence, September 25th - 27th, Hangzhou, China

Learn more >

Alibaba Cloud Free Trial

Learn and experience the power of Alibaba Cloud with a free trial worth $300-1200 USD

Learn more >

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.