一個有意思的字母逐漸增大效果

今天逛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定義字體大小,然後通過層層嵌套以達到文字逐級增大。

 
發佈了47 篇原創文章 · 獲贊 0 · 訪問量 5萬+
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章