css魔法 | 掘金马克杯

持续创作，加速成长！这是我参与「掘金日新计划 · 6 月更文挑战」的第1天，点击查看活动详情

介绍

掘金平台的活动真是多，相信很多人得到的第一个周边奖品就是掘金马克杯了，讲真这杯质量真好，而且特别当碗都不为过，所以，本期将给大家带来掘金马克杯用css如何进行绘制的，主要讲述杯身，杯口和杯把的绘制，然后会说明一下不用js去触发填充咖啡的动画效果，至于掘金图案的绘制比较繁琐也没有太多要说的，想了解的同学就看代码好了。

演示

正文

杯身

$size:280px;
.juejin-mug{
    width: $size;
    height: $size;
    position: absolute;
    cursor: pointer;
    left: 50%;
    top: 50%;
    transform: translate(-50%,-50%);
    border-top-left-radius: 50% 15%;
    border-top-right-radius: 50% 15%;
    border-bottom-left-radius: 25% 45%;
    border-bottom-right-radius: 25% 45%;
    background-color: #f6f6f6;
    background-image:linear-gradient(to left, #f6f6f6, #ffffff);
    box-shadow: -20px -25px 40px inset rgba(0,0,0,.15),
    -6px -6px 8px inset rgba(0,0,0,.09);
}
复制代码

主要是通过，我们经常会用到的 border-radius 圆角属性，但是因为杯身正着看成一个圆柱体，但是本次案例是要俯视一定的角度，为了看见内部情况，所以上半部分我们需要用过圆角进行一定的调整，每个边的圆角可以传入两个值去来完成。

杯口

而杯口，我们通过伪元素的实现绘制一个椭圆就可以实现，多加一些投影使其更有立体感。

.juejin-mug{
    &::before{
      content: "";
      width: 90%;
      height: 20%;
      display: block;
      position: absolute;
      top: 3%;
      left: 5%;
      border-radius: 50%;
      background-image: radial-gradient( 46% 60% at 50% 100%, rgb(60, 35, 41) 0%, rgb(54, 16, 21) 45%, rgb(7, 138, 214) 55% );
      box-shadow: 0 -5px 16px inset rgba(0,0,0,.2), 0 3px 9px rgba(0,0,0,.25);
      background-position: 50% 0%;
      background-size: 200% 200%;
      transition: background ease-out 1.2s;
    }
}
复制代码

众所周知，掘金马克杯里面的蓝色的，后面我们会做一个倒咖啡的动画，都会通过 transition 改变 background-position 背景位置来完成。所以，我们一开始把背景的y坐标设置成0%，而且避免露馅我们把 background-size 设置成原来的两倍，然后通过圆形渐变把外层设置成蓝色，而且内层写入咖啡色。

杯把

杯的把手我们主要是通过 border 属性也是通过做在接入方向做圆角和通过 transform 做rotate旋转拼接到杯身而成的。

.mug-handle{
    position: absolute;
    left: 95%;
    top: 23%;
    background-color: transparent;
    width: 30%;
    height: 53%;
    transform: rotate(7deg);
    border-top-right-radius: 100% 53%;
    border-bottom-right-radius: 100% 70%;
    border-top: solid 23px #dadada;
    border-right: solid 23px #dadada;
    border-bottom: solid 23px #dadada;
    &::before{
        content:"";
        display: block;
        position: absolute;
        width: calc(100% + 25px);
        height: calc(100% + 50px);
        border-top-right-radius: 100% 53%;
        border-bottom-right-radius: 100% 70%;
        left: 0px;
        top: -25px;
        background-color: transparent;
        box-shadow: -8px -3px 7px inset rgba(0,0,0,.15);
    }
}
复制代码

至于，杯把的那个伪元素目的就是给了给其增加一个光影效果，使其更立体一些。

动画

如果不用js怎么去触发这个倒咖啡动画的呢？相信很多小伙伴早就猜到了，就是用 checkbox ，当激活 checked 时，通过 + 去找他的兄弟节点就是那个马克杯的 div 从而进行一些样式属性的更改。

input[type=checkbox]{
  width: $size;
  height: $size;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%,-50%);
  z-index: 99;
  opacity: 0;
  cursor: pointer;
  &:checked {
    &+.juejin-mug{
      &::before{
        background-position: 50% 100%;
      }
    }
  }
}
.juejin-mug{
    &::before{
        background-position: 50% 0%;
        transition: background ease-out 1.2s;
    }
}
复制代码

可以看到我们在做杯口的时候，已经说明怎么实现这个动画，当checked激活后，div.juejin-mug 会改变的伪元素 before 背景y轴的位置，然后因为提前设置了 transition 进行动画过渡，所以就可以看到，咖啡正在缓缓倒满杯中。