教你制作网页LOGO发光效果

欢迎您访问我爱IT技术网，今天小编为你分享的电脑教程是建站经验系列之：【教你制作网页LOGO发光效果】，下面是详细的分享！

教你制作网页LOGO发光效果

　　小V是个爱折腾的人，自从换了wordpress新主题之后，总想着把各个地方修改成自己想要的效果。

　　主题的LOGO原本就只是一张静态图片而以，没有什么动态效果，显得有些过于低端，哈哈。于是小V就想着修改这个LOGO，能不能加一些动态样式，最初的修改方法是把a标签的的背景改成原始LOGO，然后加个a:hover的样式，使背景替换成事先做好的有发光效果的LOGO图片。这种方法虽然可以实现发光变化，但是变化的过程太生硬啦，这，不是小V想要的。

　　于是想到了能不能用JQ来实现，当然，实验结果就是现在的样式啦，小V还是很满意的。

　　先说说这个方法的原理吧。

　　这个JQ代码会在a标签里动态添加一个span标签，CSS中，a标签的背景设置为默认LOGO，span的的背景设置为有发光效果的LOGO，a和span是在坐标相同的两层位置，也就是说他们的背景是完全重叠的。然后就利用JQ脚本，设置span的透明度初始值为完全透明，当鼠标移上之后，会在设置的时间内慢慢变成不透明，就完成了这个效果。

　　具体教程在下面：

　　第一步，首先你必须得有做好的两张LOGO，对吧?类似下图这样。不要跟我说不知道怎么做发光效果，亲，请百度吧，很简单。

　　

 

　　默认LOGO和发光LOGO

　　第二步，就是修改相应的代码和CSS。

　　一般大部分主题都是用a标签里面包含img标签来实现LOGO显示的吧。将img标签去掉。小V的代码如下。

　　<a class="logo-link" href=http://www.admin5.com/article/20120822/"http://www.vsay.cn" title="V说" style="text-indent: 0px; "></a>

　　然后修改CSS样式，例子如下。

　　.logo-link {display:block;width:190px;height:190px;background:url(默认LOGO地址);}

　　.logo-link span.hover {display:block;width:190px;height:190px;background:url(发光LOGO地址);}

　　第三步，修改JS文件，添加JQ代码。

　　基本上每个主题都会加载一些JS的，随便找个每个页面都会用的JS文件，打开添加下列代码：

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

　　});

　　});

　　});

　　注意，jQuery('.logo-link,')这段中的.logo-link要换成你自己设置的a标签的class名称。

　　OK，方法大致就是这样，需要注意的就是CSS文件和JS文件中的样式名称要一致。

　　

以上所分享的是关于教你制作网页LOGO发光效果，下面是编辑为你推荐的有价值的用户互动：

　　相关问题：这种发光LOGO怎么制作做？

　　答：你好！这是吸塑发光字 吸塑发光字分三种： 1：A：平鼓吸塑字 B：尖鼓吸塑字 C：圆鼓吸塑字 其它的造型基本上都是从这三种演变过来的。譬如尖鼓吸塑字可演变菱形吸塑字、圆鼓吸塑字可演变弧形吸塑字，只是刀具的选择、下刀的深浅不同，字的造型也... >>详细

　　相关问题：关于ps的，请问怎么做到发光的效果

　　答：图层右键——混合选项——外发光 >>详细

　　相关问题：单色的logo设计中怎样表现出发光的效果？

　　答：选择图层样式--内发光--外发光 >>详细