灵感来源

我是重度古风爱好者，早年看到优美又有意境的图片，我只会点赞并默默的存下来当壁纸。

后来，我努力修炼CSS内功心法，终于，有一天我尝试实现一幅国画，虽然最终的画作，笔锋僵硬，线条流畅感不足，但是最起码我起步了。

我迈出第一步之后，从此在这条路上越跑🏃🏻‍♀️越欢快。灵感创意也是源源不断，如果给我足够的时间，没准我能开个画展。（晚上做梦不过分吧。）

话再说回来，对一件事的追求和热爱就是我灵感最好的来源。

白露暧秋色

前几天是二十四节气的白露，话说咱们中华的二十四节气，不但是对自然的合理解读，名字还十分优美。

白露节气的文学贡献也是有目共睹的。很多大文豪写了白露有关的诗句，什么“露从今夜白，月是故乡明”，什么“明朝交白露，此夜起金风”，什么“白露黄花自绕篱，幽香深谢好风吹”，什么“白露暧秋色，月明清漏中”。

白露时节，各地习俗上也很有趣，酿米酒🍶，喝白露茶🍵，吃龙眼。足见祖国的地大物博。

而我这次的创意主要集中在白露的习俗上，所以接下来我将米酒、茶、龙眼等元素集合到了我的画作中。

画

https://code.juejin.cn/pen/7143489417259270177

理想怎么照进现实

以上面这幅图为例，跟大家分享一下，我是怎么具体实现一副画作的。

照猫画虎

1、各种带弧度的闭合图形，大多可以通过为元素添加border-radius属性，设置元素的四个角的值实现的。

关键在于四个角的值可以不同。

更关键的是其实可以四个参数可以细分成八个参数。所以有了如下的等价转换：

border-radius: 50% 20% / 10% 40%;
/* 等价于： */
border-top-left-radius: 50% 10%;
border-top-right-radius: 20%  40%;
border-bottom-right-radius: 50% 10%;
border-bottom-left-radius: 20% 40%;	

2、CP搭配，效果翻倍。物品的上下或者左右相差较大时，建议采用组合图形。比如上面的茶壶，壶体我就用了两个图形叠放在一起，上面是半圆，下面是椭圆。有色差，更古朴。

善用伪类、伪元素

1、不想多加一层嵌套或者多写一行代码的时候，多半用伪类或伪元素可以实现。比如茶壶上面的小帽子。没错，我就用了一个::before伪元素给它画出来了。

.teapot-inner::before {
  content: '';
  width: 8px;
  height: 12px;
  border-radius: 100%;
  background: #b4dd85;
  position: absolute;
  top: -12px;
  left: 36px;
  border: 1px solid #9db780;
}

趣味性

1、背景渐变，一行代码，图形瞬间闪亮✨。想要背景要层次background的radial-gradient了解一下。

2、元素阴影，外阴影帮助元素塑造立体感，内阴影，不但可以营造凹陷的效果，还能实现物品内有填充物的效果。比如米酒瓶里装米酒的效果，就是在酒瓶的元素上加了box-shadow属性，并设置为内阴影。

3、动画特性，提起效果的趣味性，很难不想到animation动画，什么跑啊、跳啊、倒挂金钩啊、白露坠落，惊起涟漪啊，都可以用animation实现。

4、2D、3D转换，旋转跳跃伸伸缩缩，元素排成排略显呆板，那就用transform让它们换个角度。比如笸箩上的树叶，都是一个方向，摆盘不太美观，将叶子换换方向，美观感立马提升。

基础实现方案就介绍到这了，下面讲讲画作的具体实现方案。

露珠

配合白露时节的特点，标题增加了一颗露珠环绕的效果，平添几分乐趣。

露珠环绕的效果相对比较简单，加了一个父容器，父容器是圆形，其实是父容器在顺时针环绕。

露珠本身实现还是相对难一些的。

• 背景颜色做了渐变处理，背景颜色的渐变通过设置radial-gradient的值实现，设置颜色不同的透明度，在露珠经过标题时不会遮挡文字。
• 设置四个角不同的弧度值，可以让元素展示成一个不规则的形状。

.droplet {
  width: 20px;
  height: 74px;
  position: absolute;
  z-index: 999;
  border-radius: 100%;
}
.droplet::after {
  content: '';
  width: 14px;
  height: 14px;
  border-radius: 100% 84% 96% 88%;
  background: radial-gradient(ellipse at 22% 20%, rgba(218, 232, 232, 0.4) 0, rgba(218, 232, 232, 0.8) 28%, rgba(218, 232, 232, 1) 100%);
  box-shadow: 2px 2px 15px 5px rgba(77, 135, 157, 0.4), 5px 5px 6px rgba(77, 135, 157, 0.8), 5px 5px 40px rgba(77, 135, 157, 0.4), 5px 5px 60px rgba(77, 135, 157, 0.6), -3px -3px 5px rgba(255, 255, 255, 0.8) inset;
  transform: rotate(20deg);
  position: absolute;
  top: 7px;
  left: 7px;
}
.droplet1 {
  top: 87px;
  left: 93px;
  animation: droplet1 3s linear infinite;
}
@keyframes droplet1 {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

印章

我还做了一个自己的小印章，印章的形状是一个不规则的椭圆，所以实现的时候，是先将元素设置成椭圆，再设置四个角不同的弧度值，可以让元素展示成一个不规则的形状。

.yinzhang {
  width: 16px;
  height: 24px;
  border-radius: 100% 120% 120% 80%;
  position: absolute;
  top: 164px;
  left: 96px;
  color: #f1f1f1;
  z-index: 99;
  font-weight: 600;
  background: rgba(208, 142, 138, 0.7);
  text-align: center;
}
.yinzhang span {
  font-size: 12px;
  transform: scale(0.5);
  line-height: 1;
  display: inline-block;
  margin-top: -4px;
}

米酒🍶

酒杯是从上一篇秋月桂花图中借鉴过来的。

酒瓶，因为有文字，所以层级深一些。瓶子里装酒的效果是通过设置阴影实现的。CSS的box-shadow可以设置元素的外阴影也可以设置内阴影。这里就设置的内阴影，值后面加了inset。

.mijiu-inner {
  width: 70px;
  height: 90px;
  background: #f1f1f1;
  position: absolute;
  top: 40px;
  left: -17px;
  border-radius: 100%;
  box-shadow: -8px -38px 20px 2px #f1e9cc inset;
}
......
<div class='mijiu'>
  <div class='mijiu-lid'></div>
  <div class='mijiu-bottleneck'></div>
  <div class='mijiu-inner'>
    <div class='mijiu-text'>
      <div class='mijiu-text-line mijiu-text-line1'></div>
      <div class='mijiu-text-line mijiu-text-line2'></div>
      <div class='mijiu-text-inner'>米</div>
    </div>
  </div>
</div>

龙眼

龙眼摘下了放到器皿上，这个器皿是中华特有的笸箩（[pǒ luo]）。

• 顶部的面加了一圈内部的圆形线条，让它有内凹的效果。（好像不是特别明显）
• 下层的立体面用阴影实现的，借鉴的前篇月饼的实现方式。

.poluo {
  width: 120px;
  height: 60px;
  border-radius: 90% 90%;
  border: 1px solid #210900;
  background: #c8a590;
  box-shadow: 0px 4px 0px 0px #bda596, 0px 10px 0px 0px #cdb6a8, 0px 11px 0px 0px #483e37;
  z-index: 99;
  position: absolute;
  transform: rotateX(40deg);
  right: -40px;
  top: -20px;
}
.poluo::before {
  content: '';
  position: absolute;
  width: 110px;
  height: 50px;
  left: 5px;
  top: 5px;
  border: 1px solid #210900;
  border-radius: 90% 90%;
}

白露茶🍵

茶杯和酒杯基本是一样的实现方式。

茶壶复杂一些

• 茶壶本身是两个形状拼接的上侧是半圆下侧是椭圆；
• 茶壶把手是一个圆环，通过遮挡实现了部分环的效果；
• 茶壶嘴将一个矩形进行了旋转和拉伸，所以有了倾斜的角度。

.teapot {
  width: 80px;
  height: 60px;
  position: absolute;
  bottom: -3px;
  right: -40px;
  z-index: 110;
}
.teapot-inner {
  width: 80px;
  height: 30px;
  border-radius: 80px 80px 0 0;
  background: #2c9f8f;
  position: absolute;
  bottom: 2px;
  left: -1px;
  border-bottom: 2px solid #a2db91;
  z-index: 119;
}
.teapot-inner::before {
  content: '';
  width: 8px;
  height: 12px;
  border-radius: 100%;
  background: #b4dd85;
  position: absolute;
  top: -12px;
  left: 36px;
  border: 1px solid #9db780;
}
.teapot-bottom {
  position: absolute;
  left: 0;
  bottom: -10px;
  background: #0d6554;
  width: 78px;
  height: 25px;
  border-radius: 50%;
  z-index: 110;
}
.teapot-handle {
  border: 4px solid #1f7766;
  position: absolute;
  left: 3px;
  bottom: 3px;
  width: 64px;
  height: 60px;
  border-radius: 100%;
  z-index: 99;
}
.teapot-spout {
  position: absolute;
  left: -9px;
  bottom: -1px;
  width: 11px;
  height: 30px;
  z-index: 99;
  background: #2fa092;
  transform: rotate(-59deg) skewY(10deg);
}
.teapot-spout::before {
  content: '';
  width: 9px;
  height: 21px;
  border-radius: 100%;
  background: #2fa092;
  position: absolute;
  left: -4px;
  bottom: 3px;
  z-index: -1;
  transform: rotate(11deg);
}

白露坠落，惊起涟漪

这个效果还是有点意思的，也花了我一些心思和时间去实现它。

其实整个画面，相对而言图案较少，所以我想加一些动画效果，让整个画面更饱满一些。所以想到露珠坠落到茶杯，然后茶杯惊起一圈涟漪。

这两个动画要打配合，后面的涟漪效果设置了延迟，等露珠坠落的时候才会展示，所以需要一个时间差。

而露珠进入茶杯之后，会没入茶杯，消失不见。

.droplet2 {
  top: 3px;
  right: 40px;
  transform: scale(0.6);
  animation: droplet2 7s ease-out infinite 1s;
}
@keyframes droplet2 {
  0% {
    top: 3px;
    right: 40px;
    opacity: 1;
  }
  70% {
    top: 205px;
    right: 77px;
    opacity: 1;
  }
  74% {
    top: 208px;
    right: 77px;
    opacity: 0.7;
  }
  78% {
    top: 212px;
    right: 77px;
    opacity: 0.4;
  }
  82% {
    top: 212px;
    right: 77px;
    opacity: 0;
  }
  85% {
    top: 212px;
    right: 77px;
    opacity: 0;
  }
  95% {
    top: 3px;
    right: 40px;
    opacity: 0;
  }
  100% {
    top: 3px;
    right: 40px;
    opacity: 1;
  }
}
.wave {
  width: 30px;
  height: 10px;
  position: absolute;
  top: 5px;
  left: 9px;
  border-radius: 50%;
  border: 2px solid #0d6554;
  animation: wave 7s 4s infinite ease-out backwards;
  z-index: 999;
}
@keyframes wave {
  0% {
    transform: scale(0);
    opacity: 1;
  }
  30% {
    transform: scale(0);
    opacity: 1;
  }
  60% {
    transform: scale(1);
    opacity: 0;
  }
  100% {
    transform: scale(1);
    opacity: 0;
  }
}

一排兔子捉迷藏

我写完聊天群背景的文章之后，想到的这个功能，可以做一排卡通动物，逐个出来再下去的效果，应该挺有趣的。正好这次四个角，三个角放了白露习俗，最后一个角有点空荡荡的，就想着放个什么吧。于是就放了一排小兔子。

@keyframes rabbit {
  0% {
    top: 110px;
  }
  25% {
    top: 90px;
  }
  50% {
    top: 90px;
  }
  75% {
    top: 110px;
  }
  100% {
    top: 110px;
  }
}

总结

经历了这段时间不断地创作，除了反应敏捷，实现快速之外，我代码下的物品相较之前少些僵硬，多了些趣味。

继续加油，继续创作。