一、项目介绍
小项目是一个动画标签栏，点击任一标签会出现“手绘图标过程”、“标签栏凸起移动到点击的图标位置”、“背景颜色随之改变”等动画效果，非常丝滑。项目链接在这
二、思路总结
（1）页面元素
首先分析页面中的元素，一个深色背景的menu，其中有5个图标，另外被选中的图标有一个圆形色块和一个山丘形状的突起
因此html文档如下：
<menu class="menu">
<button class="menu_item active" style="--bgColorItem: #ff8c00;">
<!-- svg标签相当于给svg图案一个容器
viewBox指视窗位置与大小，前两个参数是位置，为左上角的横纵坐标，后两个是宽度和高度-->
<svg class="icon" viewBox="0 0 24 24">
<!-- svg代码就这在这里
常用的绘图标签有<line>、<rect>、<polygon>、<circle>、<ellipse>，分别表示绘制直线、矩形、多边形、圆形和椭圆形-->
<!-- path标签则用于绘制路径，用d属性定义如何绘制
Mx,y表示将画笔移动到x,y位置
Hx表示画水平线到指定的x坐标-->
<!-- 第一行和第三行从左画到右，第二行从右画到左 -->
<path d="M3.8,6.6h16.4" />
<path d="M20.2,12.1H3.8" />
<path d="M3.8,17.5h16.4" />
</svg>
</button>
<button class="menu_item" style="--bgColorItem: #f54888;">
<svg class="icon" viewBox="0 0 24 24">
<path d="M6.7,4.8h10.7c0.3,0,0.6,0.2,0.7,0.5l2.8,7.3c0,0.1,0,0.2,0,0.3v5.6c0,0.4-0.4,0.8-0.8,0.8H3.8
C3.4,19.3,3,19,3,18.5v-5.6c0-0.1,0-0.2,0.1-0.3L6,5.3C6.1,5,6.4,4.8,6.7,4.8z" />
<path d="M3.4,12.9H8l1.6,2.8h4.9l1.5-2.8h4.6" />
</svg>
</button>
<button class="menu_item" style="--bgColorItem: #4343f5;">
<svg class="icon" viewBox="0 0 24 24">
<path d="M3.4,11.9l8.8,4.4l8.4-4.4" />
<path d="M3.4,16.2l8.8,4.5l8.4-4.5" />
<path d="M3.7,7.8l8.6-4.5l8,4.5l-8,4.3L3.7,7.8z" />
</button>
<button class="menu_item" style="--bgColorItem: #e0b115;">
<svg class="icon" viewBox="0 0 24 24">
<path d="M5.1,3.9h13.9c0.6,0,1.2,0.5,1.2,1.2v13.9c0,0.6-0.5,1.2-1.2,1.2H5.1c-0.6,0-1.2-0.5-1.2-1.2V5.1
C3.9,4.4,4.4,3.9,5.1,3.9z" />
<path d="M4.2,9.3h15.6" />
<path d="M9.1,9.5v10.3" />
</button>
<button class="menu_item" style="--bgColorItem:#65ddb7;">
<svg class="icon" viewBox="0 0 24 24">
<path d="M5.1,3.9h13.9c0.6,0,1.2,0.5,1.2,1.2v13.9c0,0.6-0.5,1.2-1.2,1.2H5.1c-0.6,0-1.2-0.5-1.2-1.2V5.1
C3.9,4.4,4.4,3.9,5.1,3.9z" />
<path d="M5.5,20l9.9-9.9l4.7,4.7" />
<path d="M10.4,8.8c0,0.9-0.7,1.6-1.6,1.6c-0.9,0-1.6-0.7-1.6-1.6C7.3,8,8,7.3,8.9,7.3C9.7,7.3,10.4,8,10.4,8.8z" />
</svg>
</button>
<!-- 那个可以移动的凸起 -->
<div class="menu_border"></div>
</menu>
<!-- 将那块凸起裁剪为小山丘形状 -->
<div class="svg_container">
<svg viewBox="0 0 202.9 45.5">
<!-- SVG 元素 <clipPath> 定义一条剪切路径，可作为其他元素的 clip-path 属性的值。 -->
<!-- 这里主要是剪裁成小圆弧、小山丘的样子 -->
<clipPath id="menu" clipPathUnits="objectBoundingBox" transform="scale(0.0049285362247413 0.021978021978022)">
<path d="M6.7,45.5c5.7,0.1,14.1-0.4,23.3-4c5.7-2.3,9.9-5,18.1-10.5c10.7-7.1,11.8-9.2,20.6-14.3c5-2.9,9.2-5.2,15.2-7
c7.1-2.1,13.3-2.3,17.6-2.1c4.2-0.2,10.5,0.1,17.6,2.1c6.1,1.8,10.2,4.1,15.2,7c8.8,5,9.9,7.1,20.6,14.3c8.3,5.5,12.4,8.2,18.1,10.5
c9.2,3.6,17.6,4.2,23.3,4H6.7z" />
</clipPath>
</svg>
</div>
以上需要注意的点有：
- 每个图标实际上是一个
<button>元素，内含一个svg矢量图，且为了实现“手绘图标过程”的动画，每个svg图标是由<path>定义来的。原本我以为每个<path>路径定义全靠手敲，后来发现有在线svg编辑器，比如菜鸟这个，可以画svg图
画好后保存文件，用浏览器打开就能看到svg代码，然后嵌入到html文档就可以啦~
（不过我还是直接copy的svg代码_(:3_|/_)-
- 那个被点击的图标背后的圆形背景，源项目是在css中用伪元素::before实现的，下面介绍css时会说到
- 小山丘形状的突起是一个单独的
<div>块，后续会在css中用clip-path属性剪裁为山丘形状
（2）css样式
首先确定几个要点：
- 整个标签栏处于水平居中、垂直居中的位置，标签栏内每个图标也是均匀分布在其中，因此很自然地想到用
flex布局； - 每个被点击的图标位置会上升，因此需要用到
transform改变其位置，源项目用的translate3d()函数使其位置上移； - 被点击的图标下层有一个圆形的背景色块，可以用伪元素实现，在被点击前用
scale(0)缩到最小，被点击后用scale(1)改回原尺寸，同时设置对应的背景色。因为每个图标的背景色不一样，因此源项目在html文档中为每一个图标设置了css局部变量--bgColorItem，且值不同，这个变量作用域只在当前元素内，这样在设置伪元素背景色的时候就可以直接用var(--bgColorItem)； - 在点击某一图标时会出现类似笔触绘出图标的动画，具体是用
stroke-dasharray和stroke-dashoffset两个属性来实现的，前者用于设置svg描边的虚线样式，后者用于设置虚线起始位置的偏移量，在下面的代码中，设置被点击的图标的stroke-dasharray值为400，表示虚线的线段和间距长度均为400，设置动画完成时的stroke-dashoffset值为400，表示虚线的初始位置向左偏移400，同时设置图标的animation为倒放，一开始因为虚线向左偏移400，正好是虚线的线段长度，那么图标的每条虚线都处于400的间距中，也就正好隐藏了虚线线段，随着偏移量变小，虚线的线段随之显现出来，仿佛一笔画的效果。具体的解释可以看这篇文章：SVG学习之stroke-dasharray 和 stroke-dashoffset 详解 - 将标签栏上方的凸起剪裁成小山丘形状是用css属性
clip-path来实现的。具体地，menuBorder的clip-path指向html的<clipPath>标签，此元素用<path>定义了一个小山丘形状的区域。因为clipPath无需在页面中展示出来，因此将.svg_container的width和height都设置为0。
完整的css代码如下：
html {
box-sizing: border-box;
/*--前缀是指css变量，方便更改和维护，下面这样写就是定义了两个变量 */
--bgColorMenu: #1d1d27;
--duration: 0.7s;
}
html *,
html *::before,
html *::after {
box-sizing: inherit;
}
body {
margin: 0;
height: 100vh;
/* 用flex布局 */
display: flex;
overflow: hidden;
/* 垂直居中 */
align-items: center;
/* 水平居中 */
justify-content: center;
background-color: #ffb457;
/* webkit是苹果浏览器引擎，tap是点击，highlight是高亮，苹果移动端点击可点击的元素，会有一个半透明的灰色背景，下面是把这个背景给透明 */
-webkit-tap-highlight-color: transparent;
/* var(--xx)就是使用了css变量 */
transition: background-color var(--duration);
}
.menu {
margin: 0;
display: flex;
/* 1em=当前元素的字体大小（font-size）
浏览器默认字体大小为16px，因此默认为1em=16px
如果当前元素有继承父元素的font-size，那1em也是父元素的font-size*/
width: 32.05em; /*32.05*24px=...*/
font-size: 1.5em; /*1.5*16px=24px*/
padding: 0 2.85em;
position: relative;
align-items: center;
justify-content: center;
background: var(--bgColorMenu);
}
.menu_item {
/* all属性是除了unicode-bid和direction的其他css属性的总和
initial表示用浏览器默认的初始值
inherit表示继承父元素的属性值
unset表示有可继承的属性，就继承该值，如果不能，就初始值（害，这不设不设置都一个意思吗）*/
all: unset;
/* 有剩余空间，就平1/x */
flex-grow: 1;
z-index: 100;
/* 不太明白为啥这个要flex布局，而且我一旦flex布局就换行
啊啊啊啊啊啊啊啊啊啊啊智障！是.menu那里display单词写错了！！！！
点击浏览器-开发者模式-元素-flex那个小标，页面元素的虚线框是flex布局的结果，三个虚线框连一起，左右两个虚线框是flex-grow分的空间*/
display: flex;
cursor: pointer;
/* background: #ff8c00; */
/* 可以使元素变成圆形 */
border-radius: 50%;
align-items: center;
justify-content: center;
/* 告诉浏览器transform即将发生变化，使其做好准备 */
will-change: transform;
position: relative;
padding: 0.55em 0 0.85em;
transition: transform var(--timeOut, var(--duration));
}
/* 这个是选中的按钮的背景圆形的起始样式 */
.menu_item::before {
content: "";
z-index: -1;
width: 4.2em;
height: 4.2em;
border-radius: 50%;
background: black;
position: absolute;
transform: scale(0);
/* 一边给背景上色一边变大 */
transition: background-color var(--duration), transform var(--duration);
}
/* 交集选择器，即满足前者又满足后者，逗号分割就是并集选择器 */
.menu_item.active {
/* translate3d() CSS 函数在 3D 空间内移动一个元素的位置。这个移动由一个三维向量来表达，分别表示他在三个方向上移动的距离。 */
transform: translate3d(0, -0.8em, 0);
}
.menu_item.active::before {
transform: scale(1);
/* 每个的bgColorItem不一样 */
background-color: var(--bgColorItem);
}
.icon {
width: 2.6em;
height: 2.6em;
/* 定义笔触的颜色 */
stroke: white;
fill: transparent;
/* 定义笔的粗细 */
stroke-width: 1pt;
stroke-miterlimit: 10;
stroke-linecap: round;
stroke-linejoin: round;
/* 设置虚线的线段和间距都是400 */
stroke-dasharray: 400;
}
/* 定义active图标的”绘画”动画 */
.menu_item.active .icon {
animation: strok 1.5s reverse;
}
@keyframes strok {
100% {
/* 让虚线起始位置左移400，因为长度和间距也都是400，如果左移400，那么就会以间隙开始，间隔400，再是400长的实线 */
stroke-dashoffset: 400;
}
}
/* 这个就是active下menu的那个半弧 */
.menu_border {
/* 下面三个属性描述此元素的位置
代表在距menu左边距0、离menu下边距为其menu高度99%的地方*/
position: absolute;
left: 0;
bottom: 99%;
width: 10.9em;
height: 2.4em;
background-color: var(--bgColorMenu);
/* 剪切元素显示成什么样 */
clip-path: url(#menu);
will-change：transform;
/* 这里得transform是根据active图标移动位置，是在js计算得到设置的
var()函数有两个参数时，当第一个参数为none，就用第二个参数的值*/
transition: transform var(--timeOut, var(--duration));
}
.svg_container {
width: 0;
height: 0;
}
/* @media规则可用于为不同的媒体类型/设备应用不同的样式
媒体类型可以选择 screen、print、all等
下面的and关键字将媒体多种媒体特性组合在一起
下面的语句是 当浏览器的宽度为50em或更小时，menu类的字体大小为0.8em*/
@media screen and (max-width: 50em) {
.menu {
font-size: 0.8em;
}
}
可以看到还有几个效果没有实现，比如每点击一个图标，页面背景改变成对应的颜色，而这个改变需要和图标点击事件绑定，因此会在js代码中实现这个效果。
（3）js代码
js要实现的两个效果是：
- 背景颜色随点击图标变化。这个应该在图标的点击事件处理函数中设置，此外该事件处理函数还应保存当前被点击的图标，具体的可以看下面的clickItem()函数；
- 移动“标签栏的凸起——menuBorder”到被点击的图标正上方。这里主要计算被点击图标左边距据标签栏左边距的距离，但因为要使menuBorder与被点击图标垂直居中，因此还需要计算menuBorder和被点击图标的宽度，具体的公式为 const left = Math.floor( offsetActiveItem.left - menu.offsetLeft - (menuBorder.offsetWidth - offsetActiveItem.width) / 2) + "px";
完整的js代码如下：
//使用严格模式，消除一些js不严谨的地方
"use strict";
const body = document.body;
const bgColorBody = ["#ffb457", "#ff96bd", "#9999fb", "#ffe797", "#cffff1"];
const menu = body.querySelector(".menu");
const menuItems = menu.querySelectorAll(".menu_item");
const menuBorder = menu.querySelector(".menu_border");
let activeItem = menu.querySelector(".active");
//给点击菜单图标的一个事件处理函数
function clickItem(item, index) {
menu.style.removeProperty("--timeOut");
if (activeItem == item) return;
//如果点击的是一个非active的图标
//1.把这个active类名给当前点击的图标
//2.设置背景颜色
//3.把当前点击的item赋值给activeItem变量
//4.移动菜单背景的border
if (activeItem) {
activeItem.classList.remove("active");
}
item.classList.add("active");
body.style.backgroundColor = bgColorBody[index];
activeItem = item;
offsetMenuBorder(activeItem, menuBorder);
}
//移动border的位置
function offsetMenuBorder(element, menuBorder) {
// Element.getBoundingClientRect() 方法返回一个 DOMRect 对象，其提供了元素的大小及其相对于视口的位置。
const offsetActiveItem = element.getBoundingClientRect();
// Math.floor() 函数总是返回小于等于一个给定数字的最大整数。
// 元素的offsetLeft与父元素是否为body且父元素是否设置了position有关，在这里menu的父元素是body但未设置position，因此其offsetLeft的值为menu的border外侧到浏览器边框内侧的值
// 元素的offsetWith是元素左border外侧到有border外侧大小
// 这里元素的box-sizing都是border-box，所以元素的width和上边说的一样
// 这里是要计算menuBorder应该移动多少距离，前两个变量相减得到activeItem左边据menu左边的距离，但因为menuBoder需要和activeItem居中对齐（目前只是左对齐），因此需要少移动menuboder宽度的一半减activeItem宽度的一半（画个左对齐和垂直居中对齐的图便于理解）
const left =
Math.floor(
offsetActiveItem.left -
menu.offsetLeft -
(menuBorder.offsetWidth - offsetActiveItem.width) / 2
) + "px";
menuBorder.style.transform = `translate3d(${left}, 0 , 0)`;
}
offsetMenuBorder(activeItem, menuBorder);
menuItems.forEach((item, index) => {
item.addEventListener("click", () => clickItem(item, index));
});
// 监听窗口大小改变时，重新计算menuBorder的位置
window.addEventListener("resize", () => {
offsetMenuBorder(activeItem, menuBorder);
// 是在这里设置了timeOut属性，为none
menu.style.setProperty("--timeOut", "none");
});
最终的效果就是这样的啦~
