今天逛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="飘零雾雨|edzmaster@gmail.com" />
<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定义字体大小,然后通过层层嵌套以达到文字逐级增大。