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

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

盾形

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

其中，CSS樣式定義所有div都是絕對定位，dark_orange類指定了一個橘色背景：

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

我們看一下效果：

下面我們再復制一遍HTML，修改一些參數作為盾形的右側：

效果如下：

盾形的右側里面有淺色的區(qū)域，我們將盾的右側復制一份通過scale縮小一點，此外還需要調整一些樣式屬性：

light_orange對應淺一點兒的背景色：

.light_orange{background:#ee6812}

盾形已經完成了：

數字5

數字5由若干div組成，傾斜的效果依舊通過skew來控制：

light_gray類和white類對應的樣式：

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

我們看到如下效果：

為了最終實現數字5，我們需要在兩個位置打兩個“補丁”：

最終效果：

輻射背景

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

HTML5的logo已經完成了！

以上就是小編為大家?guī)淼挠肅SS3打造HTML5的Logo(實現代碼)的全部內容了，希望大家多多支持腳步之家。

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

最新評論