Simple CSS tricks to achieve the Logo animation effect (very much like the effect of the navigation bar often used, but there are differences)

Before many people said to realize like Ali Hundred Show logo as the animation effect, in order to meet the needs of users, here is a simple demonstration. Things are relatively simple, so don't think you can't handle them.

Here is the case code for the demo

1 <style>2 . Imlogo{3 Display:Block;4 width:160px;5 Height:80px;6 background:#FF5E52 URL (logo2.png) center 22px no-repeat;  /*The general wording is the horizontal position, then the vertical position*/7 -webkit-transition:background-position linear. 2s;  /*straight, linear. */8 -moz-transition:background-position linear. 2s;9 transition:background-position linear. 2s;    Ten } One . Imlogo:hover{ A background-position:center-48px;     - } - </style> the  - <aclass= "Imlogo"href="#"></a>

Display effect:

After moving in:

In fact, you just need to change the image address, logo area size (160px and 80px) background map coordinates (22PX and -48px), you can achieve your own animation, if you are very lazy, then do a 119*100px logo, A picture like the following (the background is made transparent, PNG format, you can implement the code to change color).

In the theme of the Style.css finally add, and then make a original logo height twice times the diagram first replaced, and then change the 48 for your position can be, do not calculate the words directly to try a few more can know which is appropriate.

Simple CSS tricks to achieve the Logo animation effect (very much like the effect of the navigation bar often used, but there are differences)