灵感介绍

最近实现的创意挺多的，风格也多变。赏心悦目的同时，我想着，不能光顾着自己提升，技术传播是我们技术开源社区的文化底蕴与追求。

所以我后续实现功能的时候，会将主要是技术知识点放大，不再注重介绍效果有多绚丽。

本期是一个按钮切换的功能，虽然着重点在按钮上的图案，但是细节上包含了一些技术知识点，容我一一道来。

完整效果

功能简介

试玩

文字效果

首字母大写

text-transform属性可以实现首字母大写的功能。有趣的是，带符号的首字母也会被大写。

text-transform: capitalize;

简单介绍一下text-transform，它可以帮助转换字体，属性值包括：

凹陷风格

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

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

这里是用内阴影实现的。

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

猫爪

一般实际的动物或者其他东西卡通化之后，也要保留它重要的特征，这样才能让人看到的时候自然而然的联想到是什么。

猫爪的特点之一就是它的小肉垫，一般就是上面一圈四个小椭圆，中间一个稍大的半圆。照这个方向去实现，一般都会非常像。

椭圆可以用宽高不同的圆实现。

.meat-pad {
  width: 15px;
  height: 20px;
  border-radius: 100%;
  background: #fe6d84;
  position: absolute;
}

半圆，可以用矩形只设置同一侧的圆角实现，比如这里向上的半圆，设置左上角和右上角的较大的半径值，剩下两个角设置了较小的半径值（为了图形边角柔和）。

.paw-inner {
  width: 30px;
  height: 16px;
  border-radius: 60px 60px 10px 10px;
  background: #fe6d84;
  position: absolute;
  bottom: 10px;
  left: 16px;
}

凯蒂猫

凯蒂猫英文名Hello Kitty，是我挺喜欢的一个卡通形象，外形是一只小猫咪，十分可爱。

动物卡通图形的实现，主要是实现身体的各个部位，不同部位的特征不同。比如耳朵是尖的，眼睛是圆的，胡须是线，嘴巴一般是圆的或者三角的。

尖尖的耳朵

圆形好实现，三角形也好实现，但是带弧度的三角形，有些难度，这里我用了一个设置了圆角的矩形，进行旋转，并用脸遮挡了一部分，最终呈现出来的。

.kitty-ear {
  width: 14px;
  height: 14px;
  border-radius: 5px;
  position: absolute;
  background: #fff;
  z-index: 89;
  border: 1px solid #000;
  top: 12px;
}
.kitty-ear1 {
  left: 8px;
  transform: rotate(12deg);
}
.kitty-ear2 {
  right: 8px;
  transform: rotate(-12deg);
}

说到遮挡，有时候遮挡很重要，给大家看一下戴饰品前和戴饰品后的小可爱的对比。

内心OS

此刻我想到之前常听到的那句话“换发型如同换了个人”，表示十分赞同。

未完待续

其实更好的按钮切换是，切换两侧的图形结构不变，根据切换状态，重置样式。大家可以按照这个思路尝试一下，效果不错哟。