按钮切换2.0,假期两种状态切换自如

1,191 阅读2分钟

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

前情提要

我之前参加创意大赛的时候做了一个按钮切换的功能,当时写完发现不够完美。

因为我后来思索,如何切换才能更加丝滑,然后就想到,切换的两个按钮图案由一组元素组成,通过样式控制。最近正好看到一组可爱的简笔画表情包,正好拿来试一试。

于是,我用CSS实现了一组假期专属表情。

完整效果

功能简介

开心和开摆两个表情。一个靠左,一个靠右。

点击按钮,按钮可以左右停靠。分别展示左右两个不同的按钮,以及停靠侧文字高亮。

这次丝滑了好多。

code.juejin.cn/pen/7150088…

凹陷风格

实现凹陷的方式挺多的,最常见的是内阴影或叠加元素的色差。

我一般是两种方式交叉使用,因为有时候内阴影的值不好控制。

这里是用内阴影实现的。

box-shadow: 0 2px 6px rgba(0, 0, 0, 0.5);

简笔画

简笔画需要抓住事物的特点,比如我之前画猫爪,它的特点是肉垫,画凯蒂猫,特点是胡须和三角耳朵。

本次画表情,表情的异同,大部分在于眼睛和嘴的差异,偶尔辅助手部动作或者两腮。

开心的表情,嘴部会因为微笑幅度比较大,再加点腮红表示开心时红扑扑的小脸。

开摆的表情,这个表情因人而异,且取决于当时的心情。我把眼睛都画在了一侧,嘴部画成了一个吐舌头动作,整体感觉就是搞笑又有些滑稽。

两个表情的结构是一样的,剩下的就交给CSS完成了。

<div class='expression left' id='expression'>
  <div class='eye eye1'></div>
  <div class='eye eye2'></div>
  <div class='mouth'></div>
  <div class='blush blush1'></div>
  <div class='blush blush2'></div>
</div>

丝滑切换

默认时,按钮在左侧,是开心的表情。所以默认情况设置开心的样式。

当按钮切换到右侧的时候,只需要设置表情不同部分的样式。

而不同的部分,通过伪元素就能实现。

  • 眼睛外部,是一圈椭圆,椭圆基本就是宽高的值不同。
  • 嘴巴的吐舌头,在原来基础上加了一个竖直的线,线要短于嘴巴从长度。

切换完成,相当丝滑。

.right .eye::after {
  content: '';
  width: 12px;
  height: 5px;
  background: transparent;
  border-radius: 100%;
  position: absolute;
  left: -8px;
  top: 0;
  border: 2px solid #000;
}
.right .eye1 {
  left: 16px;
}
.right .eye2 {
  right: 10px;
}
.right .mouth {
  top: 35px;
}
.right .mouth::before {
  content: '';
  width: 2px;
  height: 8px;
  background: #000;
  border-radius: 2px;
  position: absolute;
  top: -1px;
  left: 3px;
}

未完待续

按钮切换3.0我还没什么方向,等我再找找灵感。

但是表情包我收集了一套,大概20+个不同的表情,等我研究一下,看要不要来个表情包连连看。