用CSS3实现无图片的百度Logo

看到一些牛逼哄哄的前端牛用纯HTML+CSS实现了HTML5的标志、Opera的标志、遨游的标志。于是自己手痒也想来挑战自己，被我瞄准的是百度。
怎么在网页上实现无图片的百度Logo呢？
思路：百度主页的Logo（如下图）。它主要是“Baidu百度”字样和一个爪子的标志。

1、幸运的是，“Baidu百度”字样的字体已经有人设计出来了，而且是免费的，那就是“百度综艺体”（百度之既可以下载到），要在网页上引用第三方字体，可以使用CSS3的@font-face，这样即便是在用户的浏览器上没有这种字体的情况下，一样可以正常显示。
2、爪子部分实现难度最大。爪子中的四个圆圈，可以使用CSS3的border-radius实现圆形，然后用CSS3的transform来把圆形变换为椭圆；而爪子的掌心部分，比较麻烦，同样是使用CSS3的border-radius和transform来实现椭圆，然后层层叠加。

思路介绍完毕，说做就做。马上开始！
一、先搭好框架：

<div id="baiduLogo">
  <div id="leftText"><p>Bai</p></div>
  <div id="middleText">
    <p>du</p>
  </div>
  <div id="rightText"><p>百度</p></div>
</div>

为方便定位，我这里把Logo分为左边的“Bai”部分、中间的爪子和“du”、右边的“百度”这三部分。CSS代码如下：

#baiduLogo{
	position:absolute;
	left:50%;
	top:50%;
	margin-left:-90px;
	margin-top:-30px;
	width:180px;
	height:60px;
	background-color:#FFF;
	font-family:"百度综艺体", "微软雅黑";
	font-weight:bold;
	vertical-align:text-bottom;
}

#leftText{
	position:absolute;
	bottom:0px;
	left:0px;
	width:62px;
	/*height:60px;*/
	font-size:33pt;
}

#middleText{
	position:absolute;
	bottom:0px;
	left:62px;
	width:52px;
	/*height:60px;*/
	font-size:23pt;
}

#rightText{
	position:absolute;
	bottom:0px;
	right:0px;
	width:68px;
	/*height:60px;*/
	font-size:25pt;
}

#leftText p{
	position:absolute;
	bottom:-9px;
	color:#e50601;
}

#middleText p{
	position:absolute;
	display:block;
	left:9px;
	bottom:-1px;
	color:#FFFFFF;
	overflow:visible;
	z-index:7;
}

#rightText p{
	position:absolute;
	bottom:-5px;
	color:#e50601;
}