CSS打造多彩文字特效代码
来源： 录入时间：07-06-09 21:38:22
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta name="Keywords" content="多彩文字,Multi Colored Text" /> <meta http-equiv="Description" content="利用CSS 的 Clip 属性来创造 多彩文字(Multi Colored Text)" /> <meta content="all" name="robots" /> <meta http-equiv="pragma" content="no-cache" /> <meta name="author" content="forestgan" /> <meta name="copyright" content="forestgan" /> <title>多彩文字(Multi Colored Text)</title> <style type="text/css"> body{ background: #FFFFFF; color: #333333; font-family: Arial, Helvetica, sans-serif; font-size: 100%; line-height: 140%; text-align: center; padding: 0; margin: 0; } p{ margin: 0; } address{ font-size: 75%; } body,html{ height: 100%; } * html, * html body{ overflow: hidden; } #top{ min-height: 90%; overflow: auto; } * html #top{ height: 90%; } #footer{ height: 10%; background: #CC0000; color: #FFFFFF; } address{ padding-top: 1em; font-style: normal; } a{ text-decoration: none; } .textBottom { color: #333333; position: absolute; left: 3em; top: 1em; font: 26px "Century Gothic",Arial, Helvetica, sans-serif; clip: rect(18px auto auto auto); } .textTop { color: #CC0000; position: absolute; left: 3em; top: 1em; font: 26px "Century Gothic",Arial, Helvetica, sans-serif; clip: rect(0 auto 18px 0); } .container { width: 28em; height: 5em; margin: 1em auto; position: relative; background: #F6F6F6; } .textTop:hover { color: #808080; } .textBottom:hover { color: #FF4646; } </style> </head> <body lang="en"> <div id="top"> <div class="container"> <a href="#" class="textTop">Cascading Style Sheet </a> </div> <p>文字的上半部分</p> <div class="container"> <a href="#" class="textBottom">Cascading Style Sheet </a> </div> <p>文字的下半部分</p> <div class="container"> <a href="#" class="textTop">Cascading Style Sheet </a> <a href="#" class="textBottom">Cascading Style Sheet </a> </div> <p>二组文字重合的效果</p> </div> <div id="footer"> <address> Design by <a href="http://www.forest53.com">forestgan</a> 本演示采用<a href="http://www.creativecommons.cn/">创作共用授权</a>--署名和非商业用途。 </address> </div> </body> </html>
上一篇文章： 下一篇文章：