CSS3测试之——QQ企鹅

自从HTML5还有CSS3草案公布以来，国内兴起了一股学习的热潮，再包括JS2，这些都是未来WEB前端所发展的方向。做为一个WEB前端人员，必需要时刻关注前沿知识，不然等待的只有淘汰。不过，就我在公司接触的一些项目的统计来看，IE6还是浏览器占有率的大头，超过半数。所以，想迎来全面支持html5/css3的时代，恐怕还是有点遥远。

言归正传，当前关于CSS3，有个挺有名的机器猫测试页面，说测的是不同浏览器对CSS3的支持情况。本民工找来研究了一下，实很大噱头在里面，不知是有意还是无意，造成了在IE各版本下表现不一的状况，好像有点故意打压IE的嫌疑，虽然我也不喜欢IE。其实总的说来，要么就是支持，要么就是不支持，其实FF以及其它webkit内核的浏览器当前也不是真正支持CSS3，而是用各自的私有属性来支持而已。

不过看完之后，突发其想，想画一个QQ企鹅。说干就干，花了半天的时间，我承认也有参考下机器猫的代码，但是这只企鹅在不同浏览器下没有那么多的形态，只有支持与不支持两种。如下：

IE9以下的IE版本，会是左边那种情况；FF以及webkit内核的浏览器会是右边那种情况（opera下没有肚皮上的阴影），当然，版本不要太低。

虽然也没多少技术含量，但原创也辛苦。欢迎朋友们转载，但请标明出处。谢谢！

<!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=utf-8" /> <title>CSS3 QQ企鹅</title>  <style> body {margin:0; padding:0; background:#FFF;} #qq {position:absolute; margin:50px 30%; width:500px;} #face{ position:relative; z-index:100; width:260px; height:200px; border-radius:400px 400px 280px 280px; -webkit-border-radius:400px 400px 280px 280px; -moz-border-radius:400px 400px 280px 280px; background:#000; background: -webkit-gradient(linear, right top, left bottom, from(#999) ,color-stop(0.20, #333), color-stop(0.73, #000),color-stop(0.95, #000), to(#000)); background: -moz-linear-gradient(right top, #999,#333 20%, #000 73% ,#000 95% ,#000 155%); top:-15px; } #eyes{ position:relative; top:-5px; } div.eye{ position:absolute; border-radius: 100px; -webkit-border-radius: 100px; -moz-border-radius: 100px; width:50px; height:70px; z-index:20; background:#fff; } div.black_eye{ position:absolute; width:15px; height:20px; border-radius:10px; -webkit-border-radius:10px; -moz-border-radius:10px; background:#333; z-index:21; -webkit-animation-name: cate; -webkit-animation-duration: 3s; -webkit-animation-timing-function: linear; -webkit-animation-iteration-count: 200; } div.black_left{ top:95px; left:90px; } div.black_right{ top:95px; left:160px; } div.eye_left{ top:70px; left:65px; } div.eye_right{ top:70px; left:140px; } .mouth_up { border-radius: 6px; -webkit-border-radius: 6px; -moz-border-radius: 6px; position:absolute; overflow:hidden; border-bottom:3px solid #F90; width:180px; height:22px; top:145px; left:40px; } .mouth_down { position:absolute; overflow:hidden; width:150px; height:15px; top:164px; left:55px; } .mouth_in { position:absolute; border-radius: 400px; -webkit-border-radius: 400px; -moz-border-radius: 400px; background:#F90; width:400px; height:400px; } .mouth_up div { top:0; left:-110px; } .mouth_down div { border:3px solid #000; bottom:0; left:-124px; } .scarf { position:relative; border:2px solid #000; z-index:90; width:256px; height:200px; border-radius:600px 600px 280px 280px; -webkit-border-radius:600px 600px 280px 280px; -moz-border-radius:600px 600px 280px 280px; background:#D00; top:-185px; } .main_body { position:relative; z-index:80; width:340px; height:260px; border-radius:500px 500px 400px 400px; -webkit-border-radius:500px 500px 400px 400px; -moz-border-radius:500px 500px 400px 400px; background:#000; top:-270px; left:-40px; } .hand_left { position:absolute; width:150px; height:45px; border-radius:120px 0 0 25px; -webkit-border-radius:120px 0 0 25px; -moz-border-radius:120px 0 0 25px; background:#000; transform: rotate(-35deg); -webkit-transform: rotate(-35deg); -moz-transform: rotate(-35deg); -o-transform: rotate(-35deg); top:75px; left:-75px; } .hand_right { position:absolute; width:150px; height:45px; border-radius:0 120px 25px 0; -webkit-border-radius:0 120px 25px 0; -moz-border-radius:0 120px 25px 0; background:#000; transform: rotate(35deg); -webkit-transform: rotate(35deg); -moz-transform: rotate(35deg); -o-transform: rotate(35deg); top:75px; left:270px; } .main_body .belly { position:absolute; width:300px; height:220px; border-radius:500px 500px 400px 400px; -webkit-border-radius:500px 500px 400px 400px; -moz-border-radius:500px 500px 400px 400px; background:#FFF; background: -webkit-gradient(linear, right top, left bottom, from(#FFF) ,color-stop(0.50, #FEFEFE), color-stop(0.73, #F2F2F2),color-stop(0.95, #EEE), to(#BBB)); background: -moz-linear-gradient(right top, #FFF,#EEE 50%, #CCC 73% ,#999 95% ,#BBB 155%); top:30px; left:20px; } .main_body .belly .tie { position:absolute; width:35px; height:60px; border-radius:0 0 10px 10px; -webkit-border-radius:0 0 10px 10px; -moz-border-radius:0 0 10px 10px; border:2px solid #000; background:#D00; transform: rotate(10deg); -webkit-transform: rotate(10deg); -moz-transform: rotate(10deg); -o-transform: rotate(10deg); left:55px; top:48px; } .main_body .belly .tie .tie_line { position:absolute; width:2px; height:40px; background:#000; left:25px; } .foot_left { position:absolute; width:120px; height:45px; border-radius:160px 40px 100px 40px; -webkit-border-radius:160px 40px 100px 40px; -moz-border-radius:160px 40px 100px 40px; background:#F90; border:2px solid #000; top:370px; left:-40px; } .foot_right { position:absolute; width:120px; height:45px; border-radius:40px 160px 40px 100px; -webkit-border-radius:40px 160px 40px 100px; -moz-border-radius:40px 160px 40px 100px; background:#F90; border:2px solid #000; top:370px; left:176px; } </style> </head> <body> <div id="qq"> <div id="face"> <div id="eyes"> <div class="eye eye_left"></div> <div class="black_eye black_left"></div> <div class="eye eye_right"></div> <div class="black_eye black_right"></div> </div> <div class="mouth_up"> <div class="mouth_in"></div> </div> <div class="mouth_down"> <div class="mouth_in"></div> </div> </div> <div class="scarf"></div> <div class="main_body"> <div class="hand_left"></div> <div class="hand_right"></div> <div class="belly"> <div class="tie"> <div class="tie_line"></div> </div> </div> </div> <div class="foot_left"></div> <div class="foot_right"></div> </div> </body> </html>

提示：你可以先修改部分代码再运行。

Moondy 发表于 2010-7-20 3,531 Views | 类别: Xhtml/Css

32条留言立即发表评论

#1panhezeng @ 2010-7-20 22:22 回复

IE版的比较好。嘿嘿
#2zhangleifly @ 2010-7-21 16:39 回复

好美啊，哈哈
#3alex @ 2010-7-21 18:10 回复

强大~~
IE下像机器人，哈哈
#4卜卜口の @ 2010-7-24 08:29 回复

很不错~
- moondy @ 2010-7-26 17:19 回复
  
  呵呵，只是好玩而已了。没啥实际上的用途
#5N @ 2010-7-27 16:34 回复

我搞过一个海绵宝宝，不过只搭了一个框架，没全部补全啊
- moondy @ 2010-7-28 11:48 回复
  
  完成了的话发来看看哈。
#6web前端寒风 @ 2010-7-29 09:47 回复

博主可否申请交换链接
网站：web前端寒风 http://www.webbise.com
贵博客已经加好
- Moondy @ 2010-7-29 16:25 回复
  
  已经加好了，呵呵。
#7王培栋 @ 2010-8-1 14:51 回复

您好~我是王培栋最近一直在学习中~~我的QQ：654371743
#8英文SEO @ 2010-8-2 10:20 回复

哈哈~~看了一下！不错哦！
#9深圳标志设计 @ 2010-8-3 19:36 回复

哈哈~~感觉不错！在看看~~
#10cyj @ 2010-8-9 12:14 回复

“FF等webkit内核的浏览器会是右边那种情况” 笔误？
- moondy @ 2010-8-9 13:36 回复
  
  呃，这位朋友是指哪里？没看出来哎
  - clone @ 2010-8-17 17:39 回复
    
    哈哈，无意中路过，ff不是webkit内核滴~~
  - moondy @ 2010-8-18 15:52 回复
    
    俺知道FF不是webkit内核，样式表里都有-webkit及-moz的区分。不过看看这句话好像的确有歧义，我改一下。
#11深圳VI设计 @ 2010-8-11 21:41 回复

您好~文章不错看一下文章！缓解一下压力！轻轻走过！
#12购物博客 @ 2010-8-15 21:57 回复

css这东西想精通太难了
#13unicac @ 2010-8-21 20:21 回复

GG，你太强了
#14KKK @ 2010-8-23 10:18 回复

只能看出，博主的审美水平有很大的提升空间
#15fish @ 2010-8-31 12:38 回复
#16www.zzjie.com @ 2010-9-9 12:15 回复

哥的这个css3的企鹅怎么凶神恶煞的呢！
建议你写仔细点！
写的太简单了！
- Moondy @ 2010-9-9 15:33 回复
  
  呃，凶神恶煞，这话说得……
#17www.zzjie.com @ 2010-9-10 10:11 回复

腾讯的企鹅应该看起来是很漂亮的……

建议多用几个层做仔细点，在发出来.
- moondy @ 2010-9-11 00:55 回复
  
  好吧，我承认没花多少时间来弄这个东西，我觉得没有这个必要，再仔细去弄只是在浪费时间而已。用CSS画图本身就是个噱头，并没有多少应用上的意义，之前还有牛人用样式写一个个像素来画图。这并没有什么技术含量，纯体力活而已。画得出漂亮的图，不见得就能熟练地掌控整站的架构。
  我发这篇文章，只是想告诉大家CSS3能做些什么，让大家讨论一下下一个阶段的前端技术，而不是讨论这只企鹅好不好看。
  PS：我没学过美术，审美方面我不发表意见。但至少我的同事专业的美术设计师对此图表示肯定。
- lois @ 2010-12-18 01:32 回复
  
  我觉这只企鹅帅呆了~
  css3也不是为了画漂亮企鹅
#18也许是个噱头 @ 2010-9-13 12:44 回复

这个仅仅是做一个技术的研究。要做就做好看啥。
专业的美术设计师不对他对这个图做了肯定了的话我就无话可说了。
- Moondy @ 2010-9-13 12:48 回复
  
  不过这位朋友追求完美的精神是很值得学习滴
#19博客之家 @ 2010-11-29 16:47 回复

太牛了，这可需要大量的代码啊
#20博客之家 @ 2010-12-11 10:40 回复

周末快乐啊
#21网络帅哥网 @ 2010-12-12 11:49 回复

博主好久都没写文章了吧，我也好久没来了哈哈
#22mokear @ 2010-12-19 13:59 回复

牛人