使用CSS绘制一支口红

3,008 阅读6分钟

前言

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

那一夜,小包辗转反侧,思考良久,然后睡着了。不能总玩烂梗 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;
}

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

background-gradient.png

口红

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

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

  • 口红底座由三个高度不同的圆柱构成
  • 口红芯由椭圆圆角和内阴影构成
  • 口红盖由一个圆柱加 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%);

yuanzhu1.png

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

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

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

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

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

    当前线性渐变配色方向为 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%
        );
    

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

    yuanzhu2.png

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

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

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

    yuanzhu3.png

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

    口红基座共有三部分组成,因此就可以借助元素的 :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;
}

口红动画

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

kouhongwhole.png

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

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

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

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

支持定制化

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

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

源码仓库

传送门: 绘制口红

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

往期精彩文章

后语

伙伴们,如果大家感觉本文对你有一些帮助,给阿包点一个赞👍或者关注➕都是对我最大的支持。

另外如果本文章有问题,或者对文章其中一部分不理解,都可以评论区回复我,我们来一起讨论,共同学习,一起进步!