长活短说

一切还要从宁姐给我发的消息说起。

这天我正在认真写功能设计，宁姐发消息给我，原来掘金的「码上掘金编程挑战赛」有万圣节特别企划。我瞬间就来了精神头，用一种十分高效的速度完成手头的工作，就开始着手万圣节专题。

既然情绪都到这里，那就玩点有趣的。糖果🍬这个主题，我一直想做一期来着，「万圣节搞怪糖果」这个设定，感觉能设计出很多不错的创意。

感谢掘金让我认识了这帮朋友，感谢我的朋友们有什么事第一时间想到我。此处省略一万字。

不给糖就捣蛋哟🍭

挑一个吧

从事物的特质出发，如何巧用纯CSS实现万圣节专题糖果?_功能实现

创意来源

我之前看美食视频，有的糖果会被制作成比较搞怪的形状，这不创意就来了么。

糖果不止可以甜美可爱，还可以搞怪另类。我要设计一组不被定义的糖果。

开发心得

正式介绍功能实现方式方法之前，还是想唠叨一下创意开发这件事。

近一年，我实现了90+的功能片段，对于创意效果的实现，总结了一些自己的心得体会。

练习必不可少

其实我没有专门的做练习。一方面，我作为前端开发，即便我们有现成的UI组件，日常也会有UI还原的需求。另一方面，近一年掘金有很多创意活动，足够我施展拳脚。

我也从最开始的中规中矩，发展到现在的一手CSS画万物。

我对关于练习的建议很简单：想做创意开发的朋友，但是又感觉没什么想法，不知道画什么，可以先从实现身边的事物开始，逐渐向自主功能设计过度。简单到一个杯子，复杂到一个网页游戏。升级打怪，积累经验。

技术是基石

建议多扒文档，熟悉CSS的大部分熟悉，这样再功能实现的时候，才能水到渠成。MDN、菜鸟教程都可以。

从事物的特质出发

回到功能实现上，善于抓住事物的特质是我能够快速实现创意的「杀手锏」。

如果我想实现自然之物，花朵要绘制椭圆的花瓣，小草要绘制青绿色的叶子，大树要有枝干，动物要有身体部位，圆圆的月亮，星星可以闪烁，草莓有籽，西瓜外皮翠绿、内瓤粉红，零食有包装纸；

如果我想实现二十四节气，可以从节日的习俗出发，比如白露饮茶🍵、秋分放风筝🪁、寒露赏红叶🍁等。

如果我想实现节日，春节放鞭炮、贴春联，元宵节吃元宵，端午吃粽子、划龙舟，儿童节充满童趣，中秋吃月饼、赏月等。

如果我想实现生活日用品，马克杯有把手，小夜灯可以发光，显示器有任务栏的各种图标，书本有名字，时钟的指针可以转动。

如果我想实现美好寓意，莲花表达纯洁的友情，玫瑰、爱心或者红豆表达爱情，大雁书信寄思念之情。

描绘了这么多事物，总结一下：

  • 真实之物，无论是日常存在还是在自然中存在的，基本可以通过观察找到它的特质；
  • 象征之物，比如季节特色、节日习俗、游戏等，则是结合对它的理解，用具体的事物呈现抽象的寓意。

每个糖果都有故事

眨眼我是专业的

想想我们平时是怎么眨眼的，全靠眼皮再用力。

先把眼睛画出来，眼睛👁的特点比较明显、也比较简单，点睛之笔就是瞳孔上哪点泪光，闪闪动人。

因为要把眼睛覆盖，所以结构上，眼皮要放在眼睛元素的上面。

<div class="eye-mask"></div>
<div class="eye">
  <div class="eye-inner"></div>
</div>

然后就是动画效果，眨眼的效果是眼皮从无到有，眼仁从有到无。因为眼仁在眼皮下面，所以眼皮只需要完全覆盖眼仁即可。

这样一分析，功能不就有了。我一个animation动画，眼皮元素的高度从0到20px再到0，眨眼的效果就有了。

怎么快速眨眼呢？一个动画周期里面重复两次从无到有的过程即可。

.candy1 .eye-mask {
  width: 20px;
  height: 0;
  border-radius: 100%;
  position: absolute;
  background: #fff;
  top: 8px;
  left: 8px;
  z-index: 99;
  animation: candy1eye 1s linear infinite;
}
@keyframes candy1eye {
  0% {
    height: 0;
  }
  30% {
    height: 20px;
  }
  40% {
    height: 0;
  }
  50% {
    height: 20px;
  }
  100% {
    height: 0;
  }
}

哪个说骷髅不能可爱

首先小骷髅头的特点，就是下侧的牙齿，是没有外层包裹的，所以它没有下巴。因为是简笔画，所以做到神似便可以了。一个矩形，下侧的效果就出来了。

因为主题是搞怪，所以创意效果值要拉满。哪个可以拒绝一个眼眶可以DuangDuangDuang的小骷髅。

只见它，左眼眶里的眼睛在从右上到左下来回滚动，右眼眶里的眼睛在从左下到右上来回滚动。

.candy3 .eye1::before {
  top: 4px;
  left: 4px;
  animation: candy3eye1 0.5s linear infinite;
}
.candy3 .eye2::before {
  top: 4px;
  left: 4px;
  animation: candy3eye2 0.5s linear infinite;
}
@keyframes candy3eye1 {
  0% {
    top: 4px;
    left: 4px;
  }
  40% {
    top: 5px;
    left: 3px;
  }
  50% {
    top: 4px;
    left: 4px;
  }
  60% {
    top: 3px;
    left: 5px;
  }
  70% {
    top: 3px;
    left: 3px;
  }
  80% {
    top: 4px;
    left: 4px;
  }
  90% {
    top: 5px;
    left: 5px;
  }
  100% {
    top: 4px;
    left: 4px;
  }
}
@keyframes candy3eye2 {
  0% {
    top: 4px;
    left: 4px;
  }
  40% {
    top: 3px;
    left: 5px;
  }
  50% {
    top: 4px;
    left: 4px;
  }
  60% {
    top: 5px;
    left: 3px;
  }
  70% {
    top: 5px;
    left: 5px;
  }
  80% {
    top: 4px;
    left: 4px;
  }
  90% {
    top: 3px;
    left: 3px;
  }
  100% {
    top: 4px;
    left: 4px;
  }
}

爱笑的小南瓜

微笑唇，我之前表情包的文章里面有写过，这个小技巧就将椭圆的背景设置成透明，然后给它加一个足够宽的底部边框，微笑唇就实现了。

.candy2 .mouth {
  position: absolute;
  width: 20px;
  height: 30px;
  border-radius: 100%;
  background: transparent;
  top: 3px;
  left: 8px;
  border-top: none;
  border-right: none;
  border-left: none;
  border-bottom: 6px solid #273137;
}

怎么实现哈哈笑的动画呢？

我摊牌了，其实也非常简单。就是把底部边框的宽度先放大后缩小，哈哈笑动画立马呈现出来了。

@keyframes candy2mouth {
  0% {
    border-bottom: 6px solid #273137;
  }
  40% {
    border-bottom: 9px solid #273137;
  }
  50% {
    border-bottom: 6px solid #273137;
  }
  60% {
    border-bottom: 9px solid #273137;
  }
  100% {
    border-bottom: 6px solid #273137;
  }
}

熬夜会有红血丝

搞怪的眼睛怎么能没有红血丝呢，一条条画肯定不现实，于是我想到了box-shadow,没错，之前用它实现过马赛克心形。我想这种规则的红线，也是可以用box-shadow实现的。

红血丝会有分叉，一种是偏水平的线，另一种是向一侧倾斜的线。所以用两个伪元素实现两种形式的线。

.candy4 .top::before {
  content: '';
  position: absolute;
  width: 8px;
  height: 1px;
  box-shadow: 8px 6px #d80000, 21px -7px #d80000, 34px 3px #d80000, 10px 19px #d80000, 33px 14px #d80000;
  transform: rotate(30deg);
}
.candy4 .top::after {
  content: '';
  position: absolute;
  width: 1px;
  height: 10px;
  box-shadow: 22px 0px #d80000, 25px 24px #d80000, 3px 14px #d80000, 11px 25px #d80000;
}

这个圆圈有讲究

典型的棒棒糖，里面是有一个从里卷到外的圈，看着简单，但是想要用纯CSS实现它可不简单。

我仔细观察了棒棒糖图形片刻，这不就是三个半圆首尾链接组成的么，接下来的问题，半个圆环怎么实现？

特殊图形当然需要专业的属性去实现，clip-path属性可以用裁剪方式帮助创建元素的可显示区域。属性值polygon可以定义一个多边形。

clip-path: polygon(50% 0%, 100% 0%, 100% 800%, 50% 50%);

尾巴其实很简单

小幽灵一般是带尾巴的，常见的尾巴有点难画。最终采用的实现方案，其实是误打误撞。

首先小幽灵是椭圆的，我再添加圆弧属性的时候，写到最后一个角的时候，我突然想到设置为0，不就像带了个尾巴么。

border-radius: 70px 70px 70px 0;

蜘蛛可有八只腿

小蜘蛛的腿是多节的，所以依据这个特点，每只腿都设计成了两节。第二节使用伪元素就可以实现，不用额外添加元素标签。

.candy8 .top-leg::before {
  content: '';
  width: 3px;
  height: 12px;
  border-radius: 3px;
  background: #21398d;
  position: absolute;
  z-index: 19;
}

小蜘蛛的八只腿，八个角度。

日常见到的蜘蛛不是趴着不动，就是在爬动，所以根据蜘蛛的特性，设计了上下爬动的动效。

.candy8 .top {
  transform: scale(0.8);
  animation: candy8Top 5s ease infinite;
}
@keyframes candy8Top {
  0% {
    top: 30px;
    left: -20px;
  }
  40% {
    top: 7px;
    left: -8px;
  }
  50% {
    top: 7px;
    left: -8px;
  }
  90% {
    top: 30px;
    left: -20px;
  }
  100% {
    top: 30px;
    left: -20px;
  }
}

总结

文章结尾来总结一下使用CSS做创意开发的心得：

  • 多做练习，可以提高绘画速度；
  • 技术积累，对CSS足够熟悉，才能第一时间想到实现方案；
  • 从事物的特质出发，具体的事物还比较好实现，需要自己构思创造的功能，可以从象征的内容出发，触类旁通，比如节日类可以结合传统习俗，游戏类通过通关设计确定内含功能，也可以借事物的寓意传递情感，等等。
阿里云国内75折 回扣 微信号：monov8
阿里云国际，腾讯云国际，低至75折。AWS 93折 免费开户实名账号 代冲值 优惠多多 微信号：monov8 飞机：@monov6
标签: CSS