Show you how to make a website logo glow effect

Intermediary transaction http://www.aliyun.com/zixun/aggregation/6858.html ">seo diagnose Taobao guest cloud host technology Hall

Small V is a love toss the person, since changed WordPress new theme, always want to change every place to want the effect.

The theme of the logo is just a static picture and to, there is no dynamic effect, appears to be some too low-end, haha. So small v would like to modify this logo, can add some dynamic style, the original modification method is to change the background of a label to the original logo, and then add a a:hover style, so that the background to replace the prior to have the luminous effect of the logo picture. Although this method can realize the luminous change, but the process of change is too blunt, this, not small v want.

Then think of can use JQ to achieve, of course, the experimental results are now the style, small V is still very satisfied.

Let's talk about the principle of this method.

The JQ code dynamically adds a span tag to the a tag, and in CSS, the background of the A label is set to the default Logo,span background to the logo,a and span that have the same coordinates, which means that their background is completely overlapping. Then, using the JQ script, set the transparency initial value of span to be completely transparent, and when the mouse is moved, it will slowly become opaque within the set time, which completes the effect.

The specific tutorials are as follows:

First of all, you have to have a good two logo, right? Similar to the following figure. Don't tell me do not know how to do luminous effect, pro, please Baidu Bar, very simple.

Default logo and luminous logo

The second step is to modify the corresponding code and CSS.

Generally most of the themes are used in a tag contains an IMG tag to achieve the logo display. Remove the IMG tag. The code for the small V is as follows.

<a class= "Logo-link" href= "http://www.vsay.cn" title= "V" said "style=" text-indent:0px; "></a>

Then modify the CSS style, as shown in the following example.

. logo-link {Display:block;width:190px;height:190px;background:url (default logo address);}

. Logo-link Span.hover {Display:block;width:190px;height:190px;background:url (luminous logo address);}

The third step, modify the JS file, add JQ code.

Basically each topic will load some JS, casually find a page will use the JS file, open Add the following code:

JQuery (document). Ready (function () {

JQuery ('. Logo-link, '). Wrapinner ('). CSS (' textindent ', ' 0 '). each (function () {

JQuery (' Span.hover '). CSS (' opacity ', 0). Hover (function () {

JQuery (This). Stop (). Fadeto (600, 1);

}, function () {

JQuery (This). Stop (). Fadeto (600, 0);

});

});

});

Notice that the. Logo-link in JQuery ('. Logo-link, ') is replaced with the class name of the a tag you set yourself.

OK, the way is roughly the case, you need to note that the CSS file and JS file style name to be consistent.

This article is just to provide a method of thinking, the specific operation to be based on the actual code of your subject to modify.

PS: Before modifying to pay attention to backup oh, or accidentally modify the error of small V is not responsible yo.

This article links to address: http://www.vsay.cn/share-this-station-title-link-moves-smoothly-to-the-right-effect.html