今天逛CSDN的時候,無意間看到挺有意思的字母逐漸增大的效果(個人覺得比較好玩)。整理了一下,拿給大家也看看。
記得以前只是用循環寫過這樣的效果,由於很少會用到,沒去仔細研究過。今天偶然見到,還是覺得蠻好玩滴。
[演示地址:http://www.doyoe.com/model/xhtmlcss/style/bigger.htm]
代碼如下:
<!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" content="text/html; charset=gb2312" />
<meta name="Author" content="飄零霧雨|[email protected]" />
<title>字母逐漸增大</title>
<style type="text/css">
p {font-size:12px}
b {font-size:200%}
</style>
</head>
<body>
<p>I
<b>I<b>I<b>I<b>I</b></b></b></b>
</p>
</body>
</html>
這裏的I會一個比一個大,dh20156說這有點像手機信號,我說太大了。
這個效果的原理非常簡單,就是給標籤b定義字體大小,然後通過層層嵌套以達到文字逐級增大。