创建网站链接炙热强调

你知道他们说... 设计 ， 在细节 。 当你设计一个网站，有机会就盛产细节，重点加强视觉体验。 在本教程中，我们将告诉您如何创建链接 ， 强调“发光”。

1。 Photoshopping的发光：动画GIF

打开一个新的Photoshop文档。 使其在高度1px。 从技术上讲，我们可以用文件只1px这太宽，但更容易地看到我们在做什么，这个例子是15px宽。 放大，您可以看得更清楚，并打开窗口“>动画面板。

填写您想要您的文档发光颜色方面，我使用了深红色这里。 另外，请确保层锁定在窗口“>图层调板。 如果它的锁定，只需双击解锁。 现在，在动画面板，并点击旁边的小秒表不透明单击箭头的第一层。

现在拖动动画的调色板提出了如何顶部的蓝色箭头。 不太远...你拉越远它的速度较慢的光芒。 您可以尝试的时间。 随着时间的指针已经提前1方式，调整您在图层面板图层不透明度降低到零（0）。 您应该看到一个新的钻石出现在显示您的透明度时间发生了变化。 在这两个钻石现在，该层将自动“补间”之间的两个混浊，创造了100至0％的透明度，逐步过渡。

现在时间指针移动未来再发生同样的amound你没有过的，调整不透明度恢复到100。 就是这样！ 您现在已经有一个动画，将淡出和淡入在这微小的路线。

现在，“保存为Web和设备”（在文件菜单上）。 请务必选择的GIF选项（这是唯一的图形格式，支持动画）。 在右下角，请务必选择“永远的循环选项”。

保存该文件指出的“夜光underline.gif在您的Web项目目录中的图像文件夹”。

以下是最终产品：

2。 标记

为了补习起见，我们要申请我们的辉光辎链接独特的课程。 下面是一个例子，在该段链接：

<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, <a class="glow-hover" href="#">this link underline glows on hover</a> ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat <a href="#" class="glow">this link glows all the time</a>, sunt in culpa qui officia deserunt mollit anim id est laborum.</p> 

请注意有两个在本段的联系，其中一份“辉光悬停”类及一个“发光”类之一。 这只是说明两种不同的可能性。 在辉光悬停级我们将尽发光显示只强调该链接时翻车。 辉光类，我们将有光辉强调在那里所有的时间。

如果您在实际生产，你可能要考虑不使用特定的类，而是直接适用这一方式向所有锚（1）元素。 更聪明，其只适用于停泊在你的主要内容领域的要素可能是一个好主意，所以你没有得到发光强调你不希望他们！

3。 的CSS

对于我们的“发光”类，我们应用背景图像类权利，并确保它的底部对齐，沿x轴重复。 由于锚元素是内联元素，这将工作，即使在多个行，这是伟大的联系中断。

对于我们的“辉光悬停”类，我们仅适用于：hover伪类的背景图像（但在完全同样的方式），这将不仅使发光强调联系时显示正在盘旋。

 a   { color: #3366cc; text-decoration: none; } .glow   { background: url(images/glow-underline.gif) bottom repeat-x; color: black; } .glow:hover  { color: #3366cc; } .glow-hover:hover { background: url(images/glow-underline.gif) bottom repeat-x; color: black; } 

例如

对于一个快速活生生的例子，看看这些链接在行动， 请点击这里 。