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);}
}

好了，小星星补上了。

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

文章原创不易，每篇文章几乎从构思题材，到写代码，到做出教程写出来，前前后后需要四五个小时的时间。喜欢的同学，帮忙点个赞，加个收藏，谢谢啦！！！！！

“他把上厕所和吃饭喝水都算进去啦！”画外音偷偷的说。

“你滚开！” 我在脑子里怒吼一个！

“评论，一定要评论 ~ 一定要评论 ~ 评论 ~ 论~论~论~ ” 画外音歇斯底里的呼嚎声如同魔音灌顶，三日不绝！