CSS不仅能吟诗,还能作画,看CSS如何解读二十四节气之白露

·  阅读 775
CSS不仅能吟诗,还能作画,看CSS如何解读二十四节气之白露

我正在参加「码上掘金挑战赛」详情请看:码上掘金挑战赛来了!

灵感来源

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

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

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

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

白露暧秋色

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

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

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

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

理想怎么照进现实

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

照猫画虎

border-radius妙用

各种带弧度的闭合图形,大多可以通过为元素添加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%;	
复制代码

CP搭配,效果翻倍

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

善用伪类、伪元素

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

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

趣味性

背景渐变

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

元素阴影

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

动画特性

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

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;
  }
}
复制代码

总结

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

继续加油,继续创作。💪

分类:
前端
收藏成功!
已添加到「」, 点击更改