使用 CSS 绘制一支口红

前言

前几天是情人节，我亲爱的朋友们在津津有味的为女朋友挑选着精美的礼物，比如口红💄，啥啥啥化妆品🎁啊，虽说小包不懂这些东西的门道，但凑热闹可是小包的爱好啊，我不允许这么隆重的日子里没有小包留下的足迹。

那一夜，小包辗转反侧，思考良久，然后睡着了。不能总玩烂梗 new 对象🤣 吧，早上一醒来，小包突然灵光一闪，不如来绘制个礼物吧，嗯~ 口红就不错，于是就有了莫名其妙的本文。

学习本文，你会收获：

• 学会口红的绘制

• 学会绘制圆柱形

基础铺垫

在绘制口红之前，先来预热几个基础知识：

1. background 多背景：background 允许设置多背景，背景重叠部分显示先设置的背景，后设置的背景被覆盖。

2. background 支持设置渐变色为背景，如果上层渐变色部分设置为 transparent ，便可以显示出下层渐变色，比如下面案例:

.case {    background: linear-gradient(pink, pink), radial-gradient(#00caf5 9px, transparent 10px);}.case2 {    background: radial-gradient(#00caf5 9px, transparent 50px), pink;}

这效果有啥用那？口红见😜

口红

通过封面图我们可以看出，口红由三部分组成：口红底座、口红芯、口红盖。

来剖析一下口红三部分的构成：

• 口红底座由三个高度不同的圆柱构成

• 口红芯由椭圆圆角和内阴影构成

• 口红盖由一个圆柱加 logo 字构成

因此接下来的重点就在于如何实现一个圆柱！

圆柱绘制

径向渐变为圆形或椭圆形，线性渐变一般为矩形。基础铺垫部分提到过多个渐变发生叠加时，若上层背景使用 transparent ，则对应部分的下层渐变背景可以得以显示。

那如果使用径向渐变做顶部，线性渐变做侧面，是否能实现圆柱那？我们来尝试一下，先设置一个顶部的径向渐变和向右的水平渐变。

background:     radial-gradient(        ellipse 147px 49px at 50% 10%,        #766768 12%,        #5f686a 21%,        rgba(0, 0, 0, 0) 23%    ),    linear-gradient(to right, #cce0e4 64%, #415557 88%);

咦，实现了，好像又没实现，顶部椭圆后多出部分线性渐变，底部是直角。

底部比较容易解决，我们通过设置 border-radius 椭圆角实现

对于顶部，我们先来分析原因: background 设置多渐变背景时，上层设置 transparent 部分会显示下层渐变背景，因此造成部分的下层渐变被显示。

因此可以有两种解决方案: 一是缩小线性渐变的渲染面积；二是增大径向渐变的渲染面积。

1. 缩小线性渐变的渲染面积

2. 当前线性渐变配色方向为 to right ，因此我们将渐变方向调整为 to bottom，前 9% 颜色为 transparent
   

    background:         radial-gradient(            ellipse 147px 49px at 50% 10%,            #766768 12%,            #5f686a 21%,            rgba(0, 0, 0, 0) 23%          ),        linear-gradient(            to bottom,            transparent,            transparent 9%,            #cce0e4 10%,            #415557 88%        );

圆柱效果成功实现，但由于配色方案是按照水平设计的，所以看上去不是特别美观。

2. 增大径向渐变的渲染面积

3. 如果仅扩大顶部椭圆，会造成圆柱顶部与侧面的不适配，因此我们在原有椭圆的基础上，在椭圆下层添加一个更大的浅白色椭圆

    radial-gradient(ellipse 233px 165px at 50% 1%, #f7fdff 15%, rgba(0,0,0,0) 19%)

学会圆柱的绘制之后，口红基座和口红盖就可以轻松的模仿出来。详细代码可以参考源码: 绘制口红

口红基座共有三部分组成，因此就可以借助元素的 :before, :after 伪元素配合实现

口红芯

口红芯的实现主要为以下三部分:

• 背景通过 radial-gradient 配合 linear-gradient 实现

• 外形通过 border-radius 椭圆角实现

• 底部阴影通过 box-shadow inset 内阴影实现

.tip {    /* 椭圆角 */    border-radius: 51px / 20px;    border-top-left-radius: 59px 141px;    border-top-right-radius: 59px 141px;    /* 背景颜色 */    background:         radial-gradient(ellipse 105px 181px at 50% 2%, #c10505 22%, rgba(0,0,0,0) 24%),         linear-gradient(to right, #c10505 50%, #9c1515 79%);    /* 内阴影 */    box-shadow: inset 0px -6px 11px #a00868;}

口红动画

经过上面的步骤，一支漂亮的口红就绘制成功了~~~~

说实话好呆啊，小包的口红芯那？彷佛小包的半天努力就绘制一个壳子。

因此，咱们为口红添加些动画，让口红动起来。

小包给口红添加了三种动画：口红盖打开动画、口红芯伸缩动画、口红整体旋转动画，动画实现都比较简单，这里就贴一下口红芯伸缩动画代码吧。

@keyframes tip {  0% {    height: 0px;  }  10% {    height: 0px;  }  30% {    height: 40px;  }  80% {    height: 130px;  }  100% {    height: 130px;  }}

支持定制化

小包牌口红，用了都说好，如果你对口红芯的颜色或者口红外壳的颜色不满意，都可以去 还在为满意的渐变色发愁吗？10+个网站帮你愉悦搞定 选择渐变配色方案，设计独属于您的口红。

小包的审美水平有限，一直没找到漂亮的外壳颜色，只找到两种内部包括口红芯的颜色搭配。

源码仓库

传送门: 绘制口红

如果感觉有帮助的话，别忘了给小包点个 ⭐ 。

后语

我是 战场小包 ，一个快速成长中的小前端，希望可以和大家一起进步。

如果喜欢小包，可以在 infoQ 关注我，可以关注战场小包，同样可以关注我的小小公众号——小包学前端。

一路加油，冲向未来!!!