likes
comments
collection
share

从事物的特质出发,千字总结万圣节专题糖果🍭如何用纯CSS实现

作者站长头像
站长
· 阅读数 10

长活短说

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

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

不给糖就捣蛋哟🍭

创意来源

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

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

开发心得

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

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

练习必不可少

我也从最开始的中规中矩,发展到现在的一手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足够熟悉,才能第一时间想到实现方案;
  • 从事物的特质出发,具体的事物还比较好实现,需要自己构思创造的功能,可以从象征的内容出发,触类旁通,比如节日类可以结合传统习俗,游戏类通过通关设计确定内含功能,也可以借事物的寓意传递情感,等等。