HTML静态网页文字链接特效代码集合

时间:2011-03-16 23:03:58

平时喜欢做站的新手朋友可能用得上,其中有一个特效正在本博客使用。这些小代码可能对网页显示效果起到一定的美化作用。

小宇早期建站的时候使用过这样代码,现在把它收藏在本博客上,和建站新手们一起分享。

去除链接底部实线
<style>
A {text-decoration: NONE}
</style>

鼠标悬停时链接变色
<style>
A {color:#FF0066}
A:hover { color: #000000}
</style>

鼠标悬停时链接变粗
<style>
A:hover {font-weight: bold }
</style>

鼠标悬停时链接底部出现虚线
<style>
A {text-decoration: NONE}
A:hover {border-bottom:1px dashed #000000 }
</style>
其中
1px:虚线的粗幼,dashed:线条的样式(dashed是“虚线”、dotted是“点线”、soild是“实线”)。
#51bfe0:颜色的代码。
border-bottom 表示会在文字的下方出现虚线,还可以是border-top、border-right 或 border-left,若想文字的四边都出现虚线,可直接用border,border:1px dashed #000000

给链接添加背景色
<style>
A:hover {background-color: #FF0066}
</style>

悬停链接时链接移动位置
<style>
A:hover {position: relative; left:1px; top:1px}
</style>

过渡链接效果
A{cursor:hand;height:2px;behavior:url(images/linkhilight.htc);
filter:progid:dximagetransform.microsoft.gradientwipe(duration=1)}
A:hover {color:"#F407BB";text-decoration:none; }

注意其中linkhilight.htc的相对路径
其中的颜色代码可自行修改
此特效对图片无效

马赛克链接效果
<style>
A {
   color: #FF0066;
   text-decoration: none;
   font-weight: bold;
   behavior: url(images/cool.htc); filter:progid:dximagetransform.microsoft.pixelate(duration=.7, maxSquare=22, enabled=false); height: 0px; clip: rect(   );
}
</style>

悬停链接时出现彩虹特效
<SCRIPT language=javascript> var rate = 20; var obj; var act = 0; var elmH = 0; var elmS = 128; var elmV = 255; var clrOrg; var TimerID; if (navigator.appName.indexOf("Microsoft",0) != -1 && parseInt(navigator.appVersion) >= 4) { Browser = true; } else { Browser = false; } if (Browser) { document.onmouseover = doRainbowAnchor; document.onmouseout = stopRainbowAnchor; } function doRainbow() { if (Browser && act != 1) { act = 1; obj = event.srcElement; clrOrg = obj.style.color; TimerID = setInterval("ChangeColor()",100); } } function stopRainbow() { if (Browser && act != 0) { obj.style.color = clrOrg; clearInterval(TimerID); act = 0; } } function doRainbowAnchor() { if (Browser && act != 1) { obj = event.srcElement; while (obj.tagName != 'A' && obj.tagName != 'BODY') { obj = obj.parentElement; if (obj.tagName == 'A' || obj.tagName == 'BODY') break; } if (obj.tagName == 'A' && obj.href != '') { act = 1; clrOrg = obj.style.color; TimerID = setInterval("ChangeColor()",100); } } } function stopRainbowAnchor() { if (Browser && act != 0) { if (obj.tagName == 'A') { obj.style.color = clrOrg; clearInterval(TimerID); act = 0; } } } function ChangeColor() { obj.style.color = makeColor(); } function makeColor() { if (elmS == 0) { elmR = elmV; elmG = elmV; elmB = elmV; } else { t1 = elmV; t2 = (255 - elmS) * elmV / 255; t3 = elmH % 60; t3 = (t1 - t2) * t3 / 60; if (elmH < 60) { elmR = t1; elmB = t2; elmG = t2 + t3; } else if (elmH < 120) { elmG = t1; elmB = t2; elmR = t1 - t3; } else if (elmH < 180) { elmG = t1; elmR = t2; elmB = t2 + t3; } else if (elmH < 240) { elmB = t1; elmR = t2; elmG = t1 - t3; } else if (elmH < 300) { elmB = t1; elmG = t2; elmR = t2 + t3; } else if (elmH < 360) { elmR = t1; elmG = t2; elmB = t1 - t3; } else { elmR = 0; elmG = 0; elmB = 0; } } elmR = Math.floor(elmR); elmG = Math.floor(elmG); elmB = Math.floor(elmB); clrRGB = '#' + elmR.toString(16) + elmG.toString(16) + elmB.toString(16); elmH = elmH + rate; if (elmH >= 360) elmH = 0; return clrRGB; } </SCRIPT>
 

本站所有文章均为天行博客原创,转载请注明来源及出处!

作者:宇天行 (关于我

本文首发地址:https://www.huceo.com/post/100.html

或许您还会喜欢这些文章:

Tags: 作者:宇天行 | 分类:开发技术 | 评论:38 | 浏览:8188

您正在以游客身份发表评论:

必填

选填

选填

◎欢迎参与讨论,请在这里发表您的看法、交流您的观点。