日本综合一区二区|亚洲中文天堂综合|日韩欧美自拍一区|男女精品天堂一区|欧美自拍第6页亚洲成人精品一区|亚洲黄色天堂一区二区成人|超碰91偷拍第一页|日韩av夜夜嗨中文字幕|久久蜜综合视频官网|精美人妻一区二区三区

RELATEED CONSULTING
相關(guān)咨詢
選擇下列產(chǎn)品馬上在線溝通
服務(wù)時(shí)間：8:30-17:00
你可能遇到了下面的問(wèn)題
關(guān)閉右側(cè)工具欄

新聞中心

這里有您想知道的互聯(lián)網(wǎng)營(yíng)銷解決方案
教你用CSS3打造HTML5的Logo

本文將向大家介紹如何利用CSS3的新樣式屬性制作一個(gè)HTML5的Logo。我們先來(lái)看看最終的效果：

創(chuàng)新互聯(lián)科技有限公司專業(yè)互聯(lián)網(wǎng)基礎(chǔ)服務(wù)商，為您提供大邑服務(wù)器托管，高防服務(wù)器，成都IDC機(jī)房托管，成都主機(jī)托管等互聯(lián)網(wǎng)服務(wù)。

不要懷疑，上面的logo完全由HTML+CSS實(shí)現(xiàn)。我們將logo劃分為盾形、數(shù)字5和輻射背景三大部分，下面將分別實(shí)現(xiàn)每個(gè)部分。

盾形

盾形在外形上是左右對(duì)稱的，因此我們可先完成左半邊，右半邊可復(fù)制過(guò)來(lái)再修改一些參數(shù)。左半邊準(zhǔn)備用三個(gè)div實(shí)現(xiàn)，其中有兩個(gè)div需要傾斜一定的角度來(lái)實(shí)現(xiàn)盾形的左邊和底邊，這里使用transform的skew來(lái)完成。代碼如下（注意，這里只使用了webkit前綴的樣式，僅在Chrome、Safari等Webkit內(nèi)核瀏覽器支持）：

 
 
 
 
    
  
  
  
  
  1.  
    2.

    • 其中，CSS樣式定義所有div都是絕對(duì)定位，dark_orange類指定了一個(gè)橘色背景：

     
 
 
 
      
  
  
  
  
    1. div{position:absolute} 
      2. 
  
  
  
  
    2. .dark_orange{background:#e15016}
      3.

    我們看一下效果：

    下面我們?cè)購(gòu)?fù)制一遍HTML，修改一些參數(shù)作為盾形的右側(cè)：

     
 
 
 
      
  
  
  
  
    1.  
      2.

    • 效果如下：

    盾形的右側(cè)里面有淺色的區(qū)域，我們將盾的右側(cè)復(fù)制一份通過(guò)scale縮小一點(diǎn)，此外還需要調(diào)整一些樣式屬性：

     
 
 
 
      
  
  
  
  
    1.  
      2. 
  
  
  
  
    2.  
      3. 
  
  
  
  
    3.   
  •   
  •   

  • light_orange對(duì)應(yīng)淺一點(diǎn)兒的背景色：

     
 
 
 
      
  
  
  
  
    1. .light_orange{background:#ee6812}
      2.

    盾形已經(jīng)完成了：

    #p#

    數(shù)字5

    數(shù)字5由若干div組成，傾斜的效果依舊通過(guò)skew來(lái)控制：

     
 
 
 
      
  
  
  
  
    1.  
      2.

  • light_gray類和white類對(duì)應(yīng)的樣式：

     
 
 
 
      
  
  
  
  
    1. .light_gray{background:#ebebeb} 
      2. 
  
  
  
  
    2. .white{background:#fff}
      3.

    我們看到如下效果：

    為了最終實(shí)現(xiàn)數(shù)字5，我們需要在兩個(gè)位置打兩個(gè)“補(bǔ)丁”：

     
 
 
 
      
  
  
  
  
    1.  
      2. 
  
  
  
  
    2.  
      3. 
  
  
  
  
      4.

    最終效果：

    #p#

    輻射背景

    輻射背景主要使用rotate來(lái)完成，這里我貼出完整的代碼：

     
 
 
 
      
  
  
  
  
    1.  
      2. 
  
  
  
  
    2.  
      3. 
  
  
  
  
    3.  
      4. 
  
  
  
  
    4.  
      5. 
  
  
  
  
    5. HTML5 logo 
      6. 
  
  
  
  
    6.  
      7. 
  
  
  
  
    7.  
      8. 
  
  
  
  
    8.  
      9. 
  
  
  
  
    9.  
      10. 
  
  
  
  
    10.     
      11. 
  
  
  
  
    11.     
      12. 
  
  
  
  
    12.     
      13. 
  
  
  
  
    13.     
      14. 
  
  
  
  
    14.     
      15. 
  
  
  
  
    15.     
      16. 
  
  
  
  
    16.     
      17. 
  
  
  
  
    17.     
      18. 
  
  
  
  
    18.     
      19. 
  
  
  
  
    19.     
      20. 
  
  
  
  
    20.     
      21. 
  
  
  
  
    21.     
      22. 
  
  
  
  
    22.     
      23. 
  
  
  
  
    23.     
      24. 
  
  
  
  
    24.     
      25. 
  
  
  
  
    25.     
      26. 
  
  
  
  
    26.     
      27. 
  
  
  
  
    27.     
      28. 
  
  
  
  
    28.     
      29. 
  
  
  
  
    29.        
      30. 
  
  
  
  
    30.        
      31. 
  
  
  
  
    31.        
      32. 
  
  
  
  
    32.        
      33. 
  
  
  
  
    33.        
      34. 
  
  
  
  
    34.        
      35. 
  
  
  
  
    35.        
      36. 
  
  
  
  
    36.        
      37. 
  
  
  
  
    37.        
      38. 
  
  
  
  
    38.           
      39. 
  
  
  
  
    39.           
      40. 
  
  
  
  
    40.           
      41. 
  
  
  
  
    41.        
      42. 
  
  
  
  
    42.        
      43. 
  
  
  
  
    43.        
      44. 
  
  
  
  
    44.        
      45. 
  
  
  
  
    45.        
      46. 
  
  
  
  
    46.        
      47. 
  
  
  
  
    47.        
      48. 
  
  
  
  
    48.        
      49. 
  
  
  
  
    49.        
      50. 
  
  
  
  
    50.        
      51. 
  
  
  
  
    51.        
      52. 
  
  
  
  
    52.        
      53. 
  
  
  
  
    53.        
      54. 
  
  
  
  
    54.     
      55. 
  
  
  
  
    55.     
      56. 
  
  
  
  
    56.  
      57. 
  
  
  
  
    57.  
      58. 
  
  
  
  
    58.  
      59. 
  
  
  
  
    59.

    HTML5的logo已經(jīng)完成了！

     【小編碎語(yǔ)】5555555，小編通過(guò)這個(gè)方法做出來(lái)的標(biāo)志，已經(jīng)扭曲變形的另一個(gè)樣子了，現(xiàn)在還在研究這事為什么，以后會(huì)相應(yīng)補(bǔ)充上。


    分享名稱：教你用CSS3打造HTML5的Logo
    URL分享：http://www.dlmjj.cn/article/djphphh.html

    其他資訊