我正在参加「码上掘金挑战赛」详情请看：码上掘金挑战赛来了！
灵感介绍
最近实现的创意挺多的，风格也多变。赏心悦目的同时，我想着，不能光顾着自己提升，技术传播是我们技术开源社区的文化底蕴与追求。
所以我后续实现功能的时候，会将主要是技术知识点放大，不再注重介绍效果有多绚丽。
本期是一个按钮切换的功能，虽然着重点在按钮上的图案，但是细节上包含了一些技术知识点，容我一一道来。
完整效果
功能简介
按钮默认在左侧停靠，按钮图案为猫爪图案，同时左侧文字高亮；
点击按钮，按钮移动到右侧，按钮图案变幻为凯蒂猫图案，同时右侧文字高亮；
再次点击按钮，按钮移动到左侧，按钮图案重新变为猫爪图案，同时左侧文字高亮。
文字效果
首字母大写
text-transform属性可以实现首字母大写的功能。有趣的是，带符号的首字母也会被大写。
text-transform: capitalize;
简单介绍一下text-transform，它可以帮助转换字体，属性值包括：
none: 默认，没有任何转换效果。
uppercase: 将所有文本转为大写。
lowercase: 将所有文本转为小写。
capitalize: 转换所有单词让其首字母大写。
full-width: 将所有字形转换成全角，即固定宽度的正方形，类似于等宽字体，允许拉丁字符和亚洲语言字形（如中文，日文，韩文）对齐。这是一个实验中的属性，谨慎使用。
凹陷风格
实现凹陷的方式挺多的，最常见的是内阴影或叠加元素的色差。
我一般是两种方式交叉使用，因为有时候内阴影的值不好控制。
这里是用内阴影实现的。
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
遮挡前：这优秀的大脑门，看着就聪（呆）明（板）。
遮挡后：这小可爱竟然是我画的。
此刻我想到之前常听到的那句话“换发型如同换了个人”，表示十分赞同。
未完待续
其实更好的按钮切换是，切换两侧的图形结构不变，根据切换状态，重置样式。大家可以按照这个思路尝试一下，效果不错哟。
