当前位置: 首页 > 网络学院 > 网页制作基础教程 > WEB设计综合 > 超链接效果

WEB设计综合
合理使用HTML标签进行CSS布局
IE中伪类:hover的使用及BUG
CSS floats创建三列式网页布局
display:inline-block的深入理解
由浅入深漫谈margin属性
PDF、ZIP、DOC链接的标注
纯CSS代码实现翻页
CSS在表格边框上的美学应用
CSS的超级技巧大放送
创造收藏夹中的个性化图
让网页里的提交按钮变得更靓
让弹出窗口变得“体贴”
在html文件中引入其它html文件
用好超级链接标记—A
HTML语言的语法基础及规则
像表格table一样轻松布局div层
XHTML+CSS布局之XHTML应用小结
Html 书签的使用
有关HTML代码的另类应用技巧
避免表格(table)被撑开变形的CSS代码

WEB设计综合 中的 超链接效果


出处:互联网   整理: 软晨网(RuanChen.com)   发布: 2009-03-01   浏览: 2153 ::
收藏到网摘: n/a

To make your links flip vertically when you go over them, copy the code below and change #000000 to your preference.

复制下面的代码到网页中,当鼠标移至超链接之上时,可以实现垂直翻转的效果。你可以修改超链接效果色#000000

<STYLE type=text/css>A:link {
FONT-WEIGHT: bold; COLOR: #000000; TEXT-DECORATION: none
}
A:visited {
FONT-WEIGHT: bold; COLOR: #000000; TEXT-DECORATION: none
}
A:active {
FONT-WEIGHT: bold; FILTER: flipv; COLOR: #000000; HEIGHT: 0px; TEXT-DECORATION: none
}
A:hover {
FONT-WEIGHT: bold; FILTER: flipv; COLOR: #000000; HEIGHT: 0px; TEXT-DECORATION: none
}
</style>

 

link案例1

效果1

To make your links glow when you go over them, copy the code below:

复制下面的代码到网页中,当鼠标移至链接之上时,可以实现超链接发光的效果:

<STYLE type=text/css>A:link {
FONT-WEIGHT: bold; COLOR: #000000; TEXT-DECORATION: none
}
A:visited {
FONT-WEIGHT: bold; COLOR: #000000; TEXT-DECORATION: none
}
A:active {
FONT-WEIGHT: bold; filter:glow(color=#000000,strength=2); COLOR: #000000; HEIGHT: 0px; TEXT-DECORATION: none
}
A:hover {
FONT-WEIGHT: bold; glow(color=#00ff00,strength=2); COLOR: #000000; HEIGHT: 0px; TEXT-DECORATION: none
}
</style>

 

link 案例2
效果2

To add a wave effect to your links when you go over them, copy the code below:

复制下面的代码到网页中,当鼠标移至链接之上时,可以实现超链接波浪的效果:

<STYLE
type=text/css>A:link { FONT-WEIGHT: bold; COLOR: #000000;
TEXT-DECORATION: none
}
A:visited { FONT-WEIGHT: bold; COLOR: #000000; TEXT-DECORATION: none
}
A:active { FONT-WEIGHT: bold; filter: wave(add=0, freq=1, lightstrength=20, phase=10, strength=10); COLOR: #000000; HEIGHT: 0px;
TEXT-DECORATION: none
}
A:hover { FONT-WEIGHT: bold; filter: wave(add=0, freq=1, lightstrength=20, phase=10, strength=10); COLOR: #000000; HEIGHT: 0px;
TEXT-DECORATION: none
}
</style>

 

link 案例3
效果3

评论 (0) All

登陆 | 还没注册?