用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;
}

然后开始引入第三方的字体“百度综艺体”。首先定义@font-face。

@font-face {font-family: '百度综艺体';/*src: url('baidu.eot?') format('eot');*/ /*IE*//*src:url('baidu.woff') format('woff'), url('baidu.ttf') format('truetype');*/ /*non-IE*/src: url(baidu.ttf) format('truetype');
}

对于IE，只支持eot格式的字体，而其他浏览器一般都用woff或者ttf格式的，网上有这样的字体格式转换工具。哥用的是ttf格式的，然后懒得去转换字体啦，所以这个例子在IE上是显示不出百度综艺体的哦！有恒心的读者自己去转换吧，嘻嘻！

二、开始了艰难的“爪子”部分：
从简单做起，做四个椭圆先！

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

圆的大小都是18x18px的Div做成的，定义border-radius为9px即可变成一个圆形。然后用 transform: rotatey(45deg) 把它转换为一个椭圆。
在这里可能有点难以理解，其实就是在Y轴上把圆形旋转为一个椭圆。CSS代码如下：

#dot1, #dot2, #dot3, #dot4{position:absolute;width:18px;height:18px;background-color:#2a32df;-webkit-border-radius:9px;-o-border-radius:9px;-moz-border-radius:9px;border-radius:9px;-webkit-transform:rotatey(45deg);-moz-transform:rotatey(45deg);-o-transform:rotatey(45deg);transform:rotatey(45deg);
}#dot1{left:-4px;bottom:29px;
}#dot2{left:9px;bottom:42px;
}/*注意：第三个圆点是有点倾斜的*/
#dot3{left:26px;bottom:41px;-webkit-transform:rotatey(45deg) skew(-10deg);-moz-transform:rotatey(45deg) skew(-10deg);-o-transform:rotatey(45deg) skew(-10deg);transform:rotatey(45deg) skew(-10deg);
}/*注意：第四个圆点在高度上有点压缩了*/
#dot4{left:36px;bottom:25px;-webkit-transform:rotatey(45deg) scaleY(0.9);-moz-transform:rotatey(45deg) scaleY(0.9);-o-transform:rotatey(45deg) scaleY(0.9);transform:rotatey(45deg) scaleY(0.9);
}

在这里要注意一下，为模拟真实的百度Logo效果，第三个圆形是有点倾斜的。这里我用了transform的skew，也就是CSS3的倾斜效果。代码例如：transform:rotatey(45deg) skew(-10deg); 其实应该用rotate来实现Z轴上的旋转的，但是这里有点邪门的是：不能同时写rotaey和rotate！
另外需要注意的是，第四个圆形的高度不是18px，它在高度上有点压缩了。这里可以用transform的scaleY来实现高度的压缩。代码例如：transform:rotatey(45deg) scaleY(0.9);
搞定四个圆点之后，就是中间最最最麻烦的掌心部分。我的实现思路是这样的：先用三个大圆形放在掌心的三个尖端处，然后在每两个圆形上填补一个倾斜的矩形，最后用三个白色的椭圆遮罩来使得外边缘出现凹入的弧线。（思路如下图，有点粗糙的说明图~）

代码如下：

<div id="baiduLogo"><div id="leftText"><p>Bai</p></div><div id="middleText"><div id="dot1"></div><div id="dot2"></div><div id="dot3"></div><div id="dot4"></div><div id="du1"></div><div id="du2"></div><div id="du3"></div><div id="du4"></div><div id="du5"></div><div id="du6"></div><div id="du7"></div><div id="du8"></div><div id="du9"></div><p>du</p></div><div id="rightText"><p>百度</p></div>
</div>

CSS代码如下：

/*#du1、#du2和#du3是三个圆形*/
#du1, #du2, #du3{position:absolute;background-color:#2a32df;
}#du1{left:2px;bottom:1px;width:20px;height:20px;-webkit-border-radius:10px;-moz-border-radius:10px;-o-border-radius:10px;border-radius:10px;
}#du2{left:29px;bottom:1px;width:20px;height:20px;-webkit-border-radius:10px;-moz-border-radius:10px;-o-border-radius:10px;border-radius:10px;
}#du3{left:17px;bottom:22px;width:14px;height:14px;-webkit-border-radius:7px;-moz-border-radius:7px;-o-border-radius:7px;border-radius:7px;-webkit-transform:rotatey(45deg) scaleX(1.6);-moz-transform:rotatey(45deg) scaleX(1.6);-o-transform:rotatey(45deg) scaleX(1.6);transform:rotatey(45deg) scaleX(1.6);
}/*#du4、#du5和#du6是三个旋转后的矩形*/
#du4, #du5, #du6{position:absolute;background-color:#2a32df;
}#du4{left:6px;bottom:8px;width:25px;height:20px;-webkit-transform:rotate(-49deg);-moz-transform:rotate(-49deg);-o-transform:rotate(-49deg);transform:rotate(-49deg);
}#du5{left:19px;bottom:8px;width:25px;height:19px;-webkit-transform:rotate(45deg);-moz-transform:rotate(45deg);-o-transform:rotate(45deg);transform:rotate(45deg);
}#du6{left:10px;bottom:2px;width:28px;height:16px;
}/*#du7、#du8和#du9是三个白色的遮罩椭圆*/
#du7, #du8, #du9{position:absolute;background-color:#fff;
}#du7{left:2px;bottom:17px;width:16px;height:16px;-webkit-border-radius:8px;-moz-border-radius:8px;-o-border-radius:8px;border-radius:8px;-webkit-transform:rotatey(70deg) skew(-67deg);-moz-transform:rotatey(70deg) skew(-67deg);-o-transform:rotatey(70deg) skew(-67deg);transform:rotatey(70deg) skew(-67deg);
}#du8{left:31px;bottom:19px;width:14px;height:14px;-webkit-border-radius:7px;-moz-border-radius:7px;-o-border-radius:7px;border-radius:7px;-webkit-transform:rotatey(70deg) skew(70deg);-moz-transform:rotatey(70deg) skew(70deg);-o-transform:rotatey(70deg) skew(70deg);transform:rotatey(70deg) skew(70deg);
}#du9{left:16px;bottom:-9px;width:20px;height:20px;-webkit-border-radius:10px;-moz-border-radius:10px;-o-border-radius:10px;border-radius:10px;-webkit-transform:rotatex(80deg);-moz-transform:rotatex(80deg);-o-transform:rotatex(80deg);transform:rotatex(80deg);
}

用到的也主要是CSS3的transform：rotate、skew、scale。（在这里调节像素调了俺好久呀！！~~建议弟兄们现在PS上调好像素）

最后大功告成啦！看看效果：
在我心爱的遨游上显示如下：

在firefox上显示如下：

在chrome上显示如下：

在safari上显示如下：（这里有个bug，中间的“du”只有在safari的页面缩放到一个特定数值才能显示出来，难道是因为字体太小？）

在Opera上显示有点悲剧，貌似这货不支持transform：

在万恶的IE上显示得也是这般囧。我的是IE9，IE10或许会好点：

最后总结一下：总体上基本还原了百度Logo的样子，由此可见CSS3的强大，真没有这货做不出来的图形（如果不限麻烦的话）。
不过需要改进的还是有很多的：
1、“Baidu”字样无法加粗，但是中文部分却可以加粗了，奇怪！
2、掌心部分与真实logo的吻合度其实还不够相似，需要不断微调；
3、浏览器兼容性问题，如transform和字体；
4、最可怕的问题：第三方字体包有800多K的大小，这比原图片也要大了，用上第三方字体会让用户的浏览器要更多的时间去下载第三方字体，这由违背了我的设计初衷；

Web移动端把流量看得最重，试想谁会喜欢浏览器把自己手机的流量都吸光啦。百度搜索作为很多国人默认的互联网入口，它的正确和快速显示显得很重要。在移动端网络不好的情况下，对百度主页最大的挑战就是那个Logo图片。所以哥就实现了这样的一个CSS3的百度Logo。未来，哥还想用HTML5的Canvas实现一次，HTML5的Canvas在兼容性方面更好。
PS：哥需要百度的实习呀！还不见面试通知。。。。

用CSS3实现无图片的百度Logo相关推荐

18种各式各样的loading，纯html5+css3无图片
网友总结的18种各式各样的loading,纯html5+css3无图片,我再次整理下 <!DOCTYPE html> <html lang='zh_CN'> <head& ...
CSS页面重构“鑫三无准则”之“无图片”准则——张鑫旭
一.再说关于"鑫三无准则" "鑫三无准则"这个概念貌似最早是在去年的去年一篇名叫"关于Google圆角高光高宽自适应按钮及其拓展"的文章中提 ...
css3实践之图片轮播（Transform，Transition和Animation）
原文:css3实践之图片轮播(Transform,Transition和Animation) 楼主喜欢追求视觉上的享受,虽常以牺牲性能无法兼容为代价却也乐此不疲.本文就通过一个个的demo演示来简单了 ...
网站性能优化之CSS无图片技术
一.无图片技术定义在不使用CSS Image(通过CSS的引入的背景图片,不包括img标签内的图片)情况下生成类似图片效果的技术:换句话的意思就是在使用纯CSS生成类似图片效果的技术. 二.为什么要 ...
JAVA使用barcode4j生成条形码和二维码图片以及带logo的二维码，验证码图片
二维码 1.Maven引入barcode4j依赖 <dependency><groupId>net.sf.barcode4j</g ...
java生成二维码图片（有logo），并在图片下方附文字
logo配置类 /*** Created by Amber Wang on 2017/11/27 17:25.*/import java.awt.*;public class LogoConfig { ...
dedecmsmip_织梦MIP文章内容页图片适配百度MIP规范
不用修改程序内核文件,不影响电脑站和手机站文章内容页的文章内容输出,增加个自定义方法来解决织梦MIP文章内容页图片适配百度MIP规范操作步骤 width|height 去除图片宽高 style 去除 ...
网页特效：用CSS3制作3D图片立方体旋转特效
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title&g ...
html如何防止内部撑开,CSS3 流式图片的设置，避免图片撑开所在的容器（附样例）...
CSS3 流式图片效果在许多的图片网站中我们有看到了,下文我们一起来看一篇关于CSS3 流式图片的设置,避免图片撑开所在的容器(附样例)例子,具体的一起来看看. 一般来说,图片占用的空间取决于其内容, ...
使用zxing生成带logo的二维码图片，自动调节logo图片相对二维码图片的大小
使用zxing生成带logo的二维码图片,自动调节logo图片相对二维码图片的大小 * 可选是否带logo,可选是否保存二维码图片:结果返回base64编码的图片数据字符串 * 页面显示:< ...

用CSS3实现无图片的百度Logo

用CSS3实现无图片的百度Logo相关推荐

最新文章

热门文章