HardBirch

用纯CSS3实现QQ LOGO

时间:11-02-16 栏目:HTML5移动开发 作者:张飞不张,文采横飞 评论:32 点击: 13,609 次

 

         在微博上看到有新浪的朋友用CSS3实现的新浪微博LOGO(如下图所示),一时手痒,就顺手也用CSS3实现了一个QQLOGO

-->

         Demo的地址见:http://namepk.sinaapp.com/qq.html,目前只支持Chrome观看,效果如下图所示:

-->

         主要用到的CSS3属性如下所示:

-->         1、  -->border-radius

         CSS3中应用最普遍的属性,用于设置边框圆角,可以采用border-top-left-radius的方式单独设置每个圆角,并可以设置。

         1)例如要实现1个圆,可以使用如下代码:

 

         效果如下图所示:

-->

         2)要实现1/4个圆,可以用如下代码:

 

         效果如下图所示:

-->

         3)要实现1/8个圆,可以用如下代码:

 

-->         2、  -->-webkit-transform

         主要使用了rotate旋转属性,可以控制元素向左向右旋转。下图里的箭头就是用-webkit-transform:rotate属性实现的(具体实现方式参考我的博客《利用CSS3特性巧妙实现漂亮的DIV箭头》一文)。顺便提一句scale缩放属性里如果值为-1,也是有旋转效果的。

-->

-->         3、  -->-webkit-box-shadow

         盒阴影,可以设置元素的阴影。如上图所示。


-->         4、  -->RGBA

         RGBA也是CSS3中非常实用和强大的一个功能,以前所有使用RGB HTML的地方都可以使用RGBA的格式来设置透明度。例如QQ浏览器的九宫格可以做成如下显示方式:

-->

         这就是采用RGBA的透明效果实现的,具体实现方式可以参考我的博客《浏览器九宫格的简单实现》一文。

 

声明: 本文由( 张飞不张,文采横飞 )原创编译,转载请保留链接: 用纯CSS3实现QQ LOGO

用纯CSS3实现QQ LOGO:目前有32 条留言

  1. [e03]

    2011-02-23 08:50 [回复]
  2. [e03]

    2011-02-23 08:52 [回复]
  3. 30楼
    zz_zhangzhuo:

    [e03]

    2011-02-23 10:01 [回复]
  4. [e03]新年到校后看到的第一篇csdn文章,很好很强大[e03]

    2011-02-23 10:03 [回复]
  5. 28楼
    hao_weina:

    [e03]

    2011-02-23 10:27 [回复]
  6. 27楼
    Damon_lan:

    好样的。。

    2011-02-23 10:54 [回复]
  7. 26楼
    LIU890307:

    [e03]

    2011-02-23 11:12 [回复]
  8. 25楼
    narutosun2:

    [e03]保持队形

    2011-02-23 12:58 [回复]
  9. 24楼
    ConCong:

    [e01]

    2011-02-23 13:15 [回复]
  10. 23楼
    zl8522115:

    的确是蛮强大了,不过强制用代码画图,好像效率不是很高,例如那个腾讯的标志,可能画一个logo是没啥问题,但是让所有的美工都这样画是不是太累了一点,需要出一个简单点的软件,画完之后自动生成代码的工具.

    2011-02-23 13:44 [回复]
  11. 22楼
    shine333:

    喜欢SVG的飘过

    2011-02-23 16:42 [回复]
  12. 21楼
    hbzhucc:

    用css代码画图 我还是第一次听说 厉害[e01]

    2011-02-23 17:12 [回复]
  13. 20楼
    life923:

    以后保存图片 咋保存?

    右键没有

    2011-02-23 17:19 [回复]
  14. 19楼
    life923:

    搞这么多新技术

    让我们这些老的 这么学啊 [e02]

    2011-02-23 17:28 [回复]
  15. 18楼
    flianzhu:

    [e03]

    2011-02-24 09:47 [回复]
  16. 17楼
    zhaoyu0826:

    [e03]

    2011-02-24 09:58 [回复]
  17. 16楼
    lvxuxu0901:

    [e01][e03]

    2011-02-24 13:56 [回复]
  18. 15楼
    xjn19940305:

    [e01]

    2011-02-24 14:02 [回复]
  19. 14楼
    hell_boy7:

    [e01][e03]

    2011-02-24 16:18 [回复]
  20. 13楼
    xyghehehehe:

    回复 zl8522115:当这个标准定下来之后,估计很快就会有专门的软件来解决你说的问题,画图的时候直接生成css代码,copy一下就成了

    2011-02-24 17:14 [回复]
  21. 12楼
    GLAsher:

    太厉害了。[e01]

    2011-02-24 20:03 [回复]
  22. 11楼
    feng88724:

    [e02][e02]

    2011-02-24 20:22 [回复]
  23. 10楼
    justin_shi:

    以前有个css测试,就是一只多拉A梦

    2011-02-27 01:04 [回复]
  24. 9楼
    hgdsnow:

    看过看过hao

    2011-03-01 19:22 [回复]
  25. [e01]

    2011-03-08 14:17 [回复]
  26. 7楼
    linking508:

    css3 很强大![e01]

    2011-03-08 23:41 [回复]
  27. [e03]

    2011-03-10 15:55 [回复]
  28. 5楼
    eduhsd:

    [e03]

    2011-04-02 10:52 [回复]
  29. 4楼
    you0603:

    [e03]

    2011-11-22 11:10 [回复]
  30. 地板
    xbsoar:

    好东西

    2011-11-30 16:58 [回复]
  31. 板凳
    likezy:

    这种评论内容我只会写几个字,,,,

    2012-02-01 11:18 [回复]
  32. 沙发
    yjwhhh:

    [code=cpp]
    #include <iostream>

    int main()
    {
    std::cout >> "NB" >> cout.endl;
    return 0;
    }
    [/code]

    2012-04-30 22:14 [回复]

发表评论


QQ群互动

Linux系统与内核学习群:194051772

WP建站技术学习交流群:194062106

魔豆之路QR

魔豆的Linux内核之路

魔豆的Linux内核之路

优秀工程师当看优秀书籍

优秀程序员,要看优秀书!

赞助商广告

友荐云推荐