今天完成的事情：

1.任务八界面二基本完成，界面三还差一个左边导航栏。

明天计划的事情：

1.完成任务八全部。完善细节，如界面三左边导航栏。

遇到的问题：

1.使用hover给卡片添加隐藏描述时，为了有一个过场动画，选择使用了transition。其作用是，当鼠标悬停在一个div元素上，能逐渐改变表格的宽度。比如原本是10px，可以变化到20px，并且可以增加时间，比如0.1s内完成这个动作。使用起来就有了一个动画效果。

.card-hidden-word {
    height: 30%;
    width: 30%;
    position: absolute;
    text-align: center;
    padding: 20% 12%;
    background-color: #080103;
    opacity: 0.8;
    top: 0;
    left: 0;
    -webkit-transition: 0.2s all ease;
    transition: 0.2s all ease;
    z-index: -1;
    overflow: hidden;
}

此处设置需要改变的卡片宽度高度为30%，此卡片即是填写了隐藏内容的卡片。z-index的作用是把它置于常显卡片层下面。

.card-hidden:hover .card-hidden-word {
    height: 100%;
    width: 100%;
    z-index: 1;
    border-radius: 0.4rem;
}

当鼠标经过时，z-index变为1，会出现在常显卡片层上方，宽度高度会变为100%，0.2秒内完成这个动作。

如果不使用transition，也可以直接用hover。隐藏卡片和常显卡片置于一个父项，隐藏卡片设置绝对定位，即可实现与常显卡片重叠。由于设置了display：none，故平时不可见。鼠标划过时，会显现，display：block。不过这种没有动画效果。

.card-hidden-word {
    display: none;
}
.card-hidden:hover .card-hidden-word {
    display: block;
}

2.使用了transition，出现了一个问题。

多出一大片空白，仔细看是很多超出的文字。原来transition恢复到30%之后，文字过多而超出了边框，所以需要加一个overflow:hidden来修剪超出框外的文字。增加后正常。

收获：

1.了解了transition的一种使用方法，比直接使用hover会多出动画效果。不过要稍微麻烦一点。

transition可以控制变化的宽度高度和变化的时间，实现不同要求下的动画效果。不过原div盒子里文字太多的话可能会超出边框，这时要使用overflow：hidden进行修剪，

2.巩固了排版细节。

github有点炸。代码明天传上。