CSS技巧：用CSS繪制超寫實的酷炫徽章緞帶效果，超漂亮，超酷炫

為什么要用CSS來畫個徽章？這貨腦子進水了吧！

今天在電腦前設計，要做徽章效果。突然覺得可以嘗試用css實現近似的效果。說干就干，打開編輯器，讓我的手指頭活躍起來！

技術要點

通過多個圓形嵌套和漸變屬性，實現漸變的刻痕和徽章面的金色效果。你不妨數數，一共幾個圓形。
使用偽類實現緞帶的折疊效果和折疊的缺角。
使用css文字投影和旋轉屬性，實現六個星星和徽章表面金色文字的凹刻和排列。
使用多層圓角矩形的疊加，模擬多邊星型的徽章形狀。

CSS畫徽章的優勢和劣勢

優勢：

加載速度快！
顏色和文字修改更方便
... 你來接著編。

劣勢？

畫外音：“這是個典型的三費情況啊！費腦子，費鍵盤，費時間。”

好吧，都讓你知道了，這也是為什么我們不那么愛寫這樣的CSS。沒事看會兒電影去不好嗎？

實現步驟

第一步：要有一個圓，一個金色漸變的圓。

因為我后面要做可能更多個徽章，所以先在頁面中間寫一個 div shape_box 用來把我們的徽章包起來。然后，再寫一個 div shape_out，用它來畫一個黃色的圓。

  <div class="shape_box"><div class="shape_out"></div></div>

給 shape_out 增加樣式，使它變成圓形

.shape_out{position: relative;  height: 140px;width: 140px;border-radius: 50%;  background: #fc0;}

實現效果如圖：

然后，我打開PS和我要模擬的目標圖片，提取顏色值。（相信每個前端er的電腦里應該都裝有PS軟件吧？）

這里，我們提取了一個極暗的金屬色 #c7aa68 ，兩個個中間過渡色 #ce9f4f, #d0b15e，一個明亮的金屬色 #fff6c5 。然后給 shape_out 增加背景色。

background: linear-gradient(135deg, #c7aa68,#ce9f4f, #d0b15e, #fff6c5, #d0b15e, #ce9f4f,#c7aa68);
background-size: 100%;
background-position:50% 50%;

實現效果如圖：

然后我們給它加個小投影：

box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.2);

這個div的樣式就定下來了。

/* 外圈最大的圓 */
.shape_out{position: relative;  height: 140px;width: 140px;border-radius: 50%;  background: #fc0;background: linear-gradient(135deg, #c7aa68,#ce9f4f, #d0b15e, #fff6c5, #d0b15e, #ce9f4f,#c7aa68);background-size: 100%;background-position:50% 50%;box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.2); 
}

第二步：一條金色漸變的刻線。

為了模擬徽章內從外到內的第一個漸變的刻線。因為css的邊框屬性，不支持漸變，所以，為了實現這個效果，我們需要兩個圓。思路是第一個圓做一個漸變背景，第二個圓與它同心，但稍微比它小一點，覆蓋在第一個圓的上面。嗯，其實這個第一個圓，也要比第一步我們做的圓小一些，模擬徽章最外徑和刻線之間的距離。

好了，我們動手改頁面布局：

<div class="shape_box"><div class="shape_out"><div class="shape"><div class="shape_in"></div></div></div></div>

第一個圓：shape 的樣式表如下：它用來覆蓋在第一步的圓上。

.shape {position: absolute;  height: 130px;width: 130px;top: 5px;left: 5px;border-radius: 50%;  background: linear-gradient(45deg, #c7aa68,#ce9f4f, #d0b15e, #fff6c5, #d0b15e, #ce9f4f,#c7aa68);background-size: 150%;background-position:50% 50%;
}

我們看，這個圓 shape 比第一個圓 shape_out 直徑小了10px。效果如下：

接下來，我們做本步驟里的第二個圓：shape_in ，樣式表如下：

.shape_in{position: absolute;width: 126px;height: 126px;top: 2px;left: 2px;border-radius: 50%;  background: linear-gradient(135deg, #c7aa68,#ce9f4f, #d0b15e, #fff6c5, #d0b15e, #ce9f4f,#c7aa68);background-size: 300%;background-position:50% 50%;box-shadow: inset 0px 0px 0px 1px rgba(206, 159, 72, 1.0);  
}

第三步：重復上面步驟，再做兩個圓，用來模擬內圈的刻線和圓形填充

按照上一步的思路，利用 shape_in 的偽類 before 和after 再同樣寫兩個圓，覆蓋在這兩個圓的上面。（留個問題：為什么我不使用 shape_out 的偽類來做上一步的效果呢？）

.shape_in::before,.shape_in::after{position: absolute;content: '';width: 91px;height: 91px;top: 17px;left: 17px;border-radius: 50%; background-size: 300%;background: linear-gradient(45deg, #c7aa68,#ce9f4f, #d0b15e, #fff6c5, #d0b15e, #ce9f4f,#c7aa68);box-shadow: none;
}
.shape_in::after{width: 87px;height: 87px;top: 19px;left: 19px;box-shadow: inset 0px 0px 0px 1px rgba(206, 159, 72, 1.0);  background: linear-gradient(135deg, #c7aa68,#ce9f4f, #d0b15e, #fff6c5, #d0b15e, #ce9f4f,#c7aa68);
}

效果如果：

至此，我們金幣，哦，不是金幣是徽章的背景圖部分就實現了。嘿嘿，其實我看著它，就覺得也可以用它做金幣啊。

第四步，制作藍色的緞帶

呃，先畫一個方塊div：shape_text ，用藍色漸變填充。色彩取值還是PS搞定的。然后在這個div里，輸入文字：congratulat。

  <div class="shape_box"><div class="shape_out"><div class="shape"><div class="shape_in"><div class="shape_text ">congratulat</div></div></div></div></div>

設置：shape_text 的定位為絕對定位，通過css的top和left屬性，定義它的位置。

緞帶樣式表如下：

/* 緞帶 */
.shape_text{position: absolute;width: 130px;height: 22px;line-height: 22px;padding: 6px 12px;text-align: center;  font-size: 14px;color:#fff;font-weight: 700;text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.5); /* 給文字加投影 */top:45px;left:-14px;text-transform:uppercase; /* 字母自動修正為大寫 */background: linear-gradient(45deg, #0087c1, #009ee5, #0087c1);  /* 藍色背景漸變 */z-index: 3;box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.2); /* 給緞帶加投影 */
}

實現效果如下：

嗯，樣子看起來好看了很多。不過這個緞帶還差兩邊的折疊效果，接下來，完成兩個折角。

還記得前面的 shape_out 的before 和after偽類嗎？現在，我要用它們了。

我用 shape_out的偽類before 和after 實現了折疊的兩個藍色漸變方塊。用shape_text的偽類 before 和after 制作兩個與背景色完全相同的三角形，調整到兩個藍色方塊的外側，實現視覺上的缺角效果。

/* 緞帶的折疊*/
.shape_out::after,
.shape_out::before{content: "";position: absolute;background: linear-gradient(270deg, #004e74, #009ee5);background-position:0% 0%;height: 34px;width: 30px;top:60px;left:-30px;  
}
.shape_out::after{  left:140px;background: linear-gradient(90deg, #004e74, #009ee5);z-index: 1;  
}
/* 緞帶的折疊上的兩個缺角*/
.shape_text::before,
.shape_text::after{content: "";position: absolute;border-width: 17px 17px 17px 17px;border-style: solid;border-color: transparent  transparent transparent #eaeaea;top:7px;left:-24px; 
}
.shape_text::after{left:144px;border-color: transparent #eaeaea transparent transparent ;
}

嘿嘿，到這里，基本框架就完成了。

下面，是要在徽章上輸入文字。觀察一下案例的圖形，我先實現簡單的：六顆星。

第五步：給徽章增加表面刻字。

六顆星

增加六個小星星：

為了實現六顆星的定位，我在藍色緞帶（ shape_text ）上面和下面各放置一個div： top_star 和 under_star 。每個div里寫3個五角星字符：★。（偷個懶，想要用css實現五角星的同學，可以參考我的文章：）純CSS畫標準比例的五星紅旗，文章里詳細介紹了css繪制五角星的方法。

這時候，我的結構布局是這樣的：

  <div class="shape_box"><div class="shape_out"><div class="shape"><div class="shape_in"><div class="top_star"><span>★</span><span>★</span><span>★</span></div><div class="shape_text ">congratulat</div><div class="under_star"><span>★</span><span>★</span><span>★</span></div></div></div></div></div>

為什么要給每個小星星增加標簽呢？賣個關子，后面解說。

樣子這樣：

哎呀，這樣太丑了。接下來，我挨個美化它們。

調整星星的大小和顏色：

調整位置，這個簡單。用css的position值設置為絕對定位，把兩個層的定位寫好。
修改文字顏色，文字投影，文字大小。

.top_star,.under_star{position: absolute;width: 60px;top: 24px;left:37px;z-index: 3;
}
.under_star{top: 78px;
}.under_star span,
.top_star span{ position: relative;font-family: "黑體";color:#b98e26;font-size:16px;float:left;display: inline-block;text-shadow: -1px -1px 0px rgba(255, 255, 255, 0.7);
}
.top_star span{padding-top:2px;
}

看看效果：

哇，有點意思了吧！但是，距離我想要的效果是不是還差一些？對，我們接著美化。

調整細節：

現在，你知道為什么我在前面要給每個星星增加一個標簽了吧？埋伏在這呢！

通過nth-chlid() 選擇器，我可以挨個設定他們的大小和角度了。

.top_star span:nth-child(3),
.under_star span:nth-child(1){transform: rotate(20deg);
}
.top_star span:nth-child(2),
.under_star span:nth-child(2){font-size: 20px; margin-top: 6px; 
}
.top_star span:nth-child(2){margin-top: -6px;
}.top_star span:nth-child(1),
.under_star span:nth-child(3){transform: rotate(-20deg);
}

這下，小星星該如我所愿了吧？來，咱們一起看看效果：

搞定了內圈的小星星，接下來就是添加外圈文字。

外圈曲線排列的文字

思路：

外圈文字還是稍微費了些時間的。因為，我祈禱css能像AI或者PS一樣，實現沿著圓形路徑做個簡單的文字排列，就好像PS很經典的圖章效果一樣。

CSS委屈的說：“ 臣妾做不到！”

“退下吧！”

看來，還得另想辦法。像上面的星星旋轉一樣，挨個旋轉。嗯，這個思路大概是可行的。

布局：

那么，先來寫布局。寫兩個div，分別為：shape_in_top， shape_in_bottom 。給每個div里面寫五個標簽，然后分別。。嗨，上代碼吧。

  <div class="shape_box"><div class="shape_out"><div class="shape"><div class="shape_in"><div class="shape_in_top"><span>最</span><span>酷</span><span>CSS</span><span>表</span><span>現</span></div><div class="top_star"><span>★</span><span>★</span><span>★</span></div><div class="shape_text ">congratulat</div><div class="under_star"><span>★</span><span>★</span><span>★</span></div><div class="shape_in_bottom"><span>最</span><span>酷</span><span>CSS</span><span>表</span><span>現</span></div></div></div></div></div>

一目了然了。

接下來，按照前面的思路寫文字顏色，投影，旋轉角度。

添加樣式表：

/* 定義span 為大小與圓相當的正方形，用正方形的旋轉實現文字的宣傳 */
.shape_in_top span,
.shape_in_bottom span{ position: absolute;display: flex; font-family: "微軟雅黑";font-size: 12px;font-weight: 700;color:#000;text-shadow: -1px -1px 0px rgba(255, 255, 255, 0.7);
}.shape_in_top span:nth-child(1){transform: rotateZ(-45deg);
}
.shape_in_top span:nth-child(2){transform: rotateZ(-25deg);
}
.shape_in_top span:nth-child(4){transform: rotateZ(25deg);
}
.shape_in_top span:nth-child(5){transform: rotateZ(45deg);
}.shape_in_bottom span:nth-child(5){transform: rotateZ(-45deg);
}
.shape_in_bottom span:nth-child(4){transform: rotateZ(-25deg);
}
.shape_in_bottom span:nth-child(2){transform: rotateZ(25deg);
}
.shape_in_bottom span:nth-child(1){transform: rotateZ(45deg);
}

“你看，你看，月亮的臉偷偷的在改變。” 好好的一張臉，變得好難看！

這是哪里出了錯？

仔細檢查一下代碼。。。喝口水，休息五分鐘頸椎。

再看一遍。。。 -_-||，我沒有給每個span寫定位。。。難道要寫10遍定位么？

喝口水，壓壓驚！有沒有什么更好的辦法呢？請允許我用一條虛線，表達我思考的過程。

------……------ --<>----------……--^~~#&@&#%()&)#@(%~~^----------------------~-----……------ --<>----

有了！把它們放在一個和徽章大小一樣的同心容器里（一個圓），然后把他們放在圓的最頂端和最底端 ··· ···

“說人話！” 一個聲音突然炸響在腦海。好吧。。

讓文字在容器的水平方向居中，上面的div里，文字頂端對其。下面的div里，文字底端對齊，然后是不是只要以圖形中點為圓心，旋轉文字的容器，就能實現了呢？

調整樣式表，給 .shape_in_top span, .shape_in_bottom span 增加高度和寬度，讓文字按照前面說的思路對齊。（為了看明白這個思路，你需要把文字旋轉的樣式表先注釋掉，不然你就直接見證奇跡了~）

繼續調整樣式表：

.shape_in_top span{justify-content: center; /* 水平居中 */align-items:flex-start; /* 垂直頂部對齊 */ top:1px; /* 我的容器寫的比徽章的大圓小些，所以要調整容器位置，讓它居于合適的位置 */width: 125px;height: 125px; 
}
.shape_in_bottom span{top:-1px;text-shadow: 1px 1px 0px rgba(255, 255, 255, 0.7);align-items: flex-end; /* 垂直底部對齊 */ 
}

看看效果：

接下來，應該就沒問題了。把容器旋轉的樣式注釋去掉，我們看看容器旋轉后的效果。

做到這里，一個圓形的徽章已經完成了。

接下來是給它增加類似多邊形星星的效果。

第六步：增加多邊形曲線外輪廓效果

看過前面知識點的同學，一定記得我要實現它的方法。對，多個圓角矩形旋轉疊加。

先增加布局代碼：

  <div class="shape_box"><div class="shape_out"><div class="shape">        <div class="shape_in"><div class="shape_in_top"><span>最</span><span>酷</span><span>CSS</span><span>表</span><span>現</span></div><div class="top_star"><span>★</span><span>★</span><span>★</span></div><div class="shape_text ">congratulat</div><div class="under_star"><span>★</span><span>★</span><span>★</span></div><div class="shape_in_bottom"><span>最</span><span>酷</span><span>CSS</span><span>表</span><span>現</span></div></div></div></div><div class="shape_black"> <!-- 多個圓角矩形旋轉層疊，實現多邊形輪廓 --><span></span><span></span><span></span></div></div>

再完成CSS樣式表：

/* 多個圓角矩形旋轉層疊，實現多邊形輪廓 */
.shape_black {position:absolute;top:0;left: 0;right: 0;bottom: 0;display:block;display: flex;justify-content: center; /* 水平居中 */align-items: center; /* 垂直底部對齊 */ 
}
.shape_black span{position: absolute;display: inline-block;width: 120px;height: 120px;border-radius: 5px;background: linear-gradient(45deg, #c7aa68,#ce9f4f, #d0b15e, #fff6c5, #d0b15e, #ce9f4f,#c7aa68);z-index: -9;box-shadow: 0px 0px 5px 0px rgba(0, 0, 0, 0.5);
}
.shape_black span:nth-child(1){transform: rotateZ(30deg);
}
.shape_black span:nth-child(2){transform: rotateZ(60deg);
}
.shape_black span:nth-child(3){transform: rotateZ(90deg);
}

好了，徽章加緞帶到這里就全部完成了，最終效果如圖如下：

感謝大家讀到這里，叮叮叮，沒有彩蛋。。。

等吃完晚飯，我再給它加個亮閃閃的高光小星星 O(∩_∩)O?

-----------------

吃完晚飯了，做了一頓肉夾饃，一口氣吃了3個，好飽！來把我說的“小星星一閃一閃”補上。

補布局代碼（寫在 ?shape_box 的里面就行。）：

<div class="scroll_star"><span class="sc_star_x"></span><span class="sc_star_y"></span><span class="sc_star_o"></span></div><div class="scroll_star2"><span class="sc_star_x"></span><span class="sc_star_y"></span><span class="sc_star_o"></span></div><div class="scroll_star3"><span class="sc_star_x"></span><span class="sc_star_y"></span><span class="sc_star_o"></span></div>

樣式表：

.scroll_star{position: absolute;width: 13px;height: 13px;top:17px;left:110px;animation: zoomInOut 2s infinite; z-index: 99; 
}
.scroll_star2{position: absolute;width: 13px;height: 13px;top:45px;left:27px;  z-index: 99; transform:scale(2.0);animation: zoomInOut 2s infinite; 
}
.scroll_star3{position: absolute;width: 13px;height: 13px;top:95px;left:93px;  z-index: 99;   animation: zoomInOut 2s infinite; transform:scale(0.7);
}
.sc_star_x,
.sc_star_y{position: absolute;top:5px;left: 0px;width: 13px;        /* 橢圓的寬度 */height: 3px;       /* 橢圓的高度 */background-image: radial-gradient(circle, #fff, #fff); /* 橢圓的填充顏色 */border-radius: 90%;  /* 邊框半徑，創建圓形形狀 */  
}
.sc_star_y{top:0px;left: 5px;width: 3px;height: 13px;
}
.sc_star_o{position: absolute;top:3px;left: 3px;width: 7px;height: 7px;background: #fff;border-radius: 50%;box-shadow: 0px 0px 5px rgba(255, 255, 180, 0.9);}
/* 定義放大縮小的無限循環動畫 */
@keyframes zoomInOut {0%, {transform:scale(1.1);opacity: 0.9;transform:rotate(0deg);}50%, {transform:scale(1.5);opacity: 0.1;transform:rotate(180deg);}100% {transform:scale(1.1);opacity: 0.9;transform:rotate(360deg);}
}

好了，小星星補上了。

---------------------------------------------------------------------------------------------------------

文章原創不易，每篇文章幾乎從構思題材，到寫代碼，到做出教程寫出來，前前后后需要四五個小時的時間。喜歡的同學，幫忙點個贊，加個收藏，謝謝啦！！！！！

“他把上廁所和吃飯喝水都算進去啦！”畫外音偷偷的說。

“你滾開！” 我在腦子里怒吼一個！

“評論，一定要評論 ~ 一定要評論 ~ 評論 ~ 論~論~論~ ” 畫外音歇斯底里的呼嚎聲如同魔音灌頂，三日不絕！