用CSS3打造HTML5的Logo(完成编码)

日期:2021-03-03 类型:科技新闻 

关键词:抠图换背景,免费的抠图软件,美图抠图,手机抠图软件哪个好,p图软件哪个好用

本文将向大伙儿详细介绍怎样运用CSS3的新款式特性制做1个HTML5的Logo。大家先看来看最后的实际效果:


不必怀疑,上面的logo彻底由HTML+CSS完成。大家将logo区划为盾形、数据5和辐射源情况3绝大多数,下面将各自完成每一个一部分。

盾形

盾形出外形上是上下对称性的,因而大家可先进行左半边,右半边可拷贝过来再改动1些主要参数。左半边提前准备用3个div完成,在其中有两个div必须歪斜1定的角度来完成盾形的左侧和底边,这里应用transform的skew来进行。编码以下(留意,这里只应用了webkit前缀的款式,仅在Chrome、Safari等Webkit核心访问器适用):

XML/HTML Code拷贝內容到剪贴板
  1. <!-- left side -->  
  2. <div class="dark_orange" style="left:32px;width:140px;height:346px;"></div>  
  3. <div class="dark_orange" style="-webkit-transform:skewx(5deg);left:16px;width:100px;height:346px;"></div>  
  4. <div class="dark_orange" style="-webkit-transform:skewy(15deg);top:265px;left:32px;width:140px;height:100px;"></div>  

在其中,CSS款式界定全部div全是肯定精准定位,dark_orange类特定了1个橘色情况:

 

div{position:absolute}
.dark_orange{background:#e15016}

 

大家看1下实际效果:

下面大家再拷贝1遍HTML,改动1些主要参数做为盾形的右边:

 

XML/HTML Code拷贝內容到剪贴板
  1. <!-- right side -->  
  2. <div class="dark_orange" style="left:172px;width:140px;height:346px;"></div>  
  3. <div class="dark_orange" style="-webkit-transform:skewx(⑸deg);left:227px;width:100px;height:346px;"></div>  
  4. <div class="dark_orange" style="-webkit-transform:skewy(⑴5deg);top:265px;left:172px;width:140px;height:100px;"></div>  

实际效果以下:

盾形的右边里边有浅色系的地区,大家将盾的右边拷贝1份根据scale变小1点,另外还必须调剂1些款式特性:

XML/HTML Code拷贝內容到剪贴板
  1. <!-- inner -->  
  2. <div style="-webkit-transform:scale(0.82);left:31px;top:25px">  
  3. <div class="light_orange" style="left:172px;width:140px;height:346px;"></div>  
  4. <div class="light_orange" style="-webkit-transform:skewx(⑸deg);left:227px;width:100px;height:363px;"></div>  
  5. <div class="light_orange" style="-webkit-transform:skewy(⑴5deg);top:282px;left:172px;width:138px;height:100px;"></div>  
  6. </div>  

light_orange对应浅1点儿的情况色:

 

.light_orange{background:#ee6812}

 

盾形早已进行了:

数据5

数据5由若干div构成,歪斜的实际效果依然根据skew来操纵:

XML/HTML Code拷贝內容到剪贴板
  1. <!-- 5 -->  
  2. <div class="light_gray" style="height:43px;width:102px;left:70px;top:70px"></div>  
  3. <div class="light_gray" style="width:46px;height:216px;-webkit-transform:skewx(5deg);top:70px;left:75px;"></div>  
  4. <div class="light_gray" style="height:43px;width:95px;left:77px;top:156px"></div>  
  5. <div class="light_gray" style="height:47px;width:87px;left:85px;top:251px;-webkit-transform:skewy(15deg)"></div>  
  6.   
  7. <div class="white" style="height:43px;width:102px;left:172px;top:70px"></div>  
  8. <div class="white" style="width:46px;height:216px;-webkit-transform:skewx(⑸deg);top:70px;left:223px;"></div>  
  9. <div class="white" style="height:43px;width:95px;left:172px;top:156px"></div>  
  10. <div class="white" style="height:47px;width:87px;left:172px;top:251px;-webkit-transform:skewy(⑴5deg)"></div>  

light_gray类和white类对应的款式:

 

.light_gray{background:#ebebeb}
.white{background:#fff}

 

大家看到以下实际效果:

以便最后完成数据5,大家必须在两个部位打两个“补钉”:

XML/HTML Code拷贝內容到剪贴板
  1. <!-- patch -->  
  2. <div class="dark_orange" style="height:20px;top:199px;width:80px;left:60px;"></div>  
  3. <div class="light_orange" style="height:43px;top:113px;width:100px;left:180px;"></div>  

最后实际效果:

辐射源情况

辐射源情况关键应用rotate来进行,这里我贴出详细的编码:

XML/HTML Code拷贝內容到剪贴板
  1. <!DOCTYPE html>  
  2. <html>  
  3. <head>  
  4. <meta charset="utf⑻"/>  
  5. <title>HTML5 logo</title>  
  6. <style>  
  7. div{position:absolute}   
  8. .dark_orange{background:#e15016}   
  9. .light_orange{background:#ee6812}   
  10. .light_gray{background:#ebebeb}   
  11. .white{background:#fff}   
  12. .beam{width:1600px;height:20px;-webkit-transform-origin:800 10;top:290px;left:⑷00px}   
  13. </style>  
  14. </head>  
  15. <body style="margin:0;padding:0">  
  16. <div class="bg" style="width:800px;height:600px;background:#f2f2f2;overflow:hidden">  
  17.   
  18. <div class="white beam" style="-webkit-transform:rotate(5deg)"></div>  
  19. <div class="white beam" style="-webkit-transform:rotate(15deg)"></div>  
  20. <div class="white beam" style="-webkit-transform:rotate(25deg)"></div>  
  21. <div class="white beam" style="-webkit-transform:rotate(35deg)"></div>  
  22. <div class="white beam" style="-webkit-transform:rotate(45deg)"></div>  
  23. <div class="white beam" style="-webkit-transform:rotate(55deg)"></div>  
  24. <div class="white beam" style="-webkit-transform:rotate(65deg)"></div>  
  25. <div class="white beam" style="-webkit-transform:rotate(75deg)"></div>  
  26. <div class="white beam" style="-webkit-transform:rotate(85deg)"></div>  
  27. <div class="white beam" style="-webkit-transform:rotate(95deg)"></div>  
  28. <div class="white beam" style="-webkit-transform:rotate(105deg)"></div>  
  29. <div class="white beam" style="-webkit-transform:rotate(115deg)"></div>  
  30. <div class="white beam" style="-webkit-transform:rotate(125deg)"></div>  
  31. <div class="white beam" style="-webkit-transform:rotate(135deg)"></div>  
  32. <div class="white beam" style="-webkit-transform:rotate(145deg)"></div>  
  33. <div class="white beam" style="-webkit-transform:rotate(155deg)"></div>  
  34. <div class="white beam" style="-webkit-transform:rotate(165deg)"></div>  
  35. <div class="white beam" style="-webkit-transform:rotate(175deg)"></div>  
  36.   
  37.   
  38.   
  39. <div class="logo" style="top:120px;left:229px;">  
  40. <!-- left side -->  
  41. <div class="dark_orange" style="left:32px;width:140px;height:346px;"></div>  
  42. <div class="dark_orange" style="-webkit-transform:skewx(5deg);left:16px;width:100px;height:346px;"></div>  
  43. <div class="dark_orange" style="-webkit-transform:skewy(15deg);top:265px;left:32px;width:140px;height:100px;"></div>  
  44. <!-- right side -->  
  45. <div class="dark_orange" style="left:172px;width:140px;height:346px;"></div>  
  46. <div class="dark_orange" style="-webkit-transform:skewx(⑸deg);left:227px;width:100px;height:346px;"></div>  
  47. <div class="dark_orange" style="-webkit-transform:skewy(⑴5deg);top:265px;left:172px;width:140px;height:100px;"></div>  
  48. <!-- inner -->  
  49. <div style="-webkit-transform:scale(0.82);left:31px;top:25px">  
  50. <div class="light_orange" style="left:172px;width:140px;height:346px;"></div>  
  51. <div class="light_orange" style="-webkit-transform:skewx(⑸deg);left:227px;width:100px;height:363px;"></div>  
  52. <div class="light_orange" style="-webkit-transform:skewy(⑴5deg);top:282px;left:172px;width:138px;height:100px;"></div>  
  53. </div>  
  54. <!-- 5 -->  
  55. <div class="light_gray" style="height:43px;width:102px;left:70px;top:70px"></div>  
  56. <div class="light_gray" style="width:46px;height:216px;-webkit-transform:skewx(5deg);top:70px;left:75px;"></div>  
  57. <div class="light_gray" style="height:43px;width:95px;left:77px;top:156px"></div>  
  58. <div class="light_gray" style="height:47px;width:87px;left:85px;top:251px;-webkit-transform:skewy(15deg)"></div>  
  59.   
  60. <div class="white" style="height:43px;width:102px;left:172px;top:70px"></div>  
  61. <div class="white" style="width:46px;height:216px;-webkit-transform:skewx(⑸deg);top:70px;left:223px;"></div>  
  62. <div class="white" style="height:43px;width:95px;left:172px;top:156px"></div>  
  63. <div class="white" style="height:47px;width:87px;left:172px;top:251px;-webkit-transform:skewy(⑴5deg)"></div>  
  64. <!-- patch -->  
  65. <div class="dark_orange" style="height:20px;top:199px;width:80px;left:60px;"></div>  
  66. <div class="light_orange" style="height:43px;top:113px;width:100px;left:180px;"></div>  
  67. </div>  
  68. <!-- end of logo -->  
  69. </div>  
  70. <!-- end of bg -->  
  71. </body>  
  72. </html>  

HTML5的logo早已进行了!

以上便是网编为大伙儿带来的用CSS3打造HTML5的Logo(完成编码)的所有內容了,期待大伙儿多多适用步伐之家。

原文详细地址:http://www.cnblogs.com/androidshouce/archive/2016/06/16/5589780.html