艾研之家

书山有路勤为径,学海无涯苦作舟!

渐变链接特效

很多网上网下的朋友都超喜欢渐变链接特效,纷纷询问具体的制作过程,因为网上不容易找到专门的教程,但我仍然认为功夫永远在技巧之外,技巧这种东西本来就应该大家分享的,但不见得学会了就一定会有出色的作品,FEEL很重要。OK,闲话少说,今天就专门写下这个教程,希望大家能举一反三,设计出令人耳目一新的作品。

首先,新建一个文本文档,例如取名为yourname,后缀为.htc。

在文档中写入以下内容:

<public:component>
<public:attach event="onmouseover" onevent="domouseover()">
<public:attach event="onmouseout" onevent="domouseout()">
<script language="javascript">
function domouseover(){
with(element)
{filters.item(0).Apply();filters.item(0).Play();}}
function domouseout(){
with(element){
filters.item(0).Apply();
filters.item(0).Play();}}
</script>
</public:component>

保存。

打开已经设置好超链接的网页,在<head></head>之间写入以下内容:

<style type=text/css>
<!--
a {cursor:hand; height:1; behavior: url(yourname.htc); filter:progid:dximagetransform.microsoft.gradientwipe(duration=1);text-decoration : none ; } 
a:link { color : #009900 ; }
a:visited { color : #009900 ; }
a:hover { color : #ffffff ; }          (此段即为鼠标划过超连接时所显示的渐变颜色代码)
a:active { color : #009900 ; }
-->
</style>

保存。大功告成。

欲浏览正确效果,请上传到自己的空间内,再用浏览器查看。没有装IIS的同学估计在本机无法看到正确效果。

发表评论:

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

«   2017年3月   »
12345
6789101112
13141516171819
20212223242526
2728293031
搜索
控制面板
您好,欢迎到访网站!
  查看权限
网站分类
最新留言
文章归档
站点信息
  • 文章总数:17
  • 页面总数:0
  • 分类总数:13
  • 标签总数:20
  • 评论总数:1
  • 浏览总数:53309
友情链接
图标汇集
  • RainbowSoft Studio Z-Blog
  • 订阅本站的 RSS 2.0 新闻聚合