很奇特的大字符CSS链接文字效果_文本链接特效

缂傚倷绀佸ú锕傚焻缁€鎱筪eCMS闁荤喐鐟ュΛ婵嬨€傞崼鏇炴瀬婵炲棙鍨熼弻锟�婵炴垶姊规竟鍡涘煘閺嶎厽鈷掗柨鐕傛嫹缂備礁顦遍崰鎰耿閸ヮ剙绀夐柍銉ㄦ珪閻濓拷闂備緡鍋勯ˇ杈╃礊婢跺本鍏滈柡鍥ㄦ皑闂夊秹鏌ゆ潏銊︻棖缂佹唻鎷� 闂佸搫鍟版慨鎾椽閺嶎偆鍗氭繛鍡樻尰濮ｆ劗鈧鎮堕崕閬嶅矗閿燂拷,闂佽皫鍕姢閻庤濞婂鍫曞礃椤斿吋顏熸繛鎴炴尨閸嬫捇姊哄▎鎯ф灈闁告瑥绻樺濠氭晸閿燂拷!

比较奇特的CSS链接文字效果，先运行一下看看效果吧。
　　超大字母组成的一组数字，而且鼠标滑过每一个链接，都会出现响应变化的效果，不多见的一种功能，总体感觉还不错。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" mrc="text/html; charset=gb2312" />
<title>字母链接效果- www.mb5u.com</title>
<style type="text/css">

ul#off {list-style-type:none; padding:0; margin:0; width:750px; height:130px; margin:2em auto; position:relative;}
ul#off li {display:block; width:75px; height:100px; margin:10px; position:relative; float:left;}
ul#off li.gap {margin-right:75px;}
ul#off a {display:block; width:0; height:0; text-decoration:none; position:absolute; left:0; top:0;}
/*www.mb5u.com*/
ul#off a em {cursor:pointer; font-style:normal; font-weight:bold;}
ul#off a span {display:none;}
/*www.mb5u.com*/
ul#off a em.hz {position:absolute; display:block; height:20px; width:75px; cursor:pointer; text-align:center; line-height:20px; color:#fff;}
ul#off a em.vtc {position:absolute; display:block; height:60px; width:25px; cursor:pointer; left:0; top:20px;}
ul#off a em.vtl {position:absolute; display:block; height:80px; width:25px; cursor:pointer; left:0; top:0;}
ul#off a em.vtp {position:absolute; display:block; height:40px; width:25px; cursor:pointer;}
ul#off a em.bk {position:absolute; display:block; height:25px; width:25px; cursor:pointer;}
/*www.mb5u.com*/
ul#off a em.toph {top:0; left:0;}
ul#off a em.midh {top:40px; left:0;}
ul#off a em.both {top:80px; left:0;}
ul#off a em.topr {top:0; left:50px;}
ul#off a em.bktl {top:20px; left:0;}
ul#off a em.bktr {top:20px; left:50px;}
ul#off a em.bkbl {top:60px; left:0;}
ul#off a em.bkbr {top:60px; left:50px;}
.ccc em {background:#939;}
.sss em {background:#939;}
.ppp em {background:#39b;}
.lll em {background:#39b;}
.aaa em {background:#333;}
.yyy em {background:#39b;}
/*www.mb5u.com*/
ul#off a:hover {color:#c00; background:#ddd;}
ul#off a.ccc:hover em {background:#606; color:#c6c;}
ul#off a.sss:hover em {background:#606; color:#c6c;}
ul#off a.ppp:hover em {background:#069; color:#6ce;}
ul#off a.lll:hover em {background:#069; color:#6ce;}
ul#off a.aaa:hover em {background:#000; color:#888;}
ul#off a.yyy:hover em {background:#069; color:#6ce;}
ul#off a:hover span {display:block; width:75px; height:1px; font-size:3px; position:absolute; top:110px; left:0; border-top:5px dashed #000;}
ul#off a:active, ul#off a:focus {background:#eee;}
ul#off a:active em, ul#off a:focus em {background:#f0ca93; color:#000;}
ul#off a:active span, ul#off a:focus span {border-top:5px solid #f0ca93;}
</style>
</head>
<body>

<ul id="off">
<li><a class="ccc" href="/">jQuery</a></li>
<li><a class="sss" href="/">MENUS</a></li>
<li class="gap"><a class="sss" href="/">Jscss</a></li>
<li><a class="ppp" href="http://mb5u.com/jscss/">BOXES</a></li>
<li><a class="lll" href="/">mb5u.com</a></li>
<li><a class="aaa" href="/">EXPLORER</a></li>
<li><a class="yyy" href="/">OPACITY</a></li>
</ul>

</body>
</html>

所属频道：文本链接特效/更新时间：2012-12-04

[收藏][报错][返回列表]

很奇特的大字符CSS链接文字效果_文本链接特效

文本链接特效Rss订阅特效代码搜索

文本链接特效推荐

猜你也喜欢看这些

闁衡偓閹増顥�&闁告帒妫旈棅锟�