50projects50days知识点-progress-steps

示例网址：

https://50projects50days.com/projects/progress-steps/

http://50projects.tc.cluski.top/50projects50days/progress-steps/

CSS变量

在此例子在将颜色属性作为CSS变量来进行复用。

:root {
    --line-border-fill: #3498db;
    --line-border-empty: #383838;
}

.circle.active {
    border-color: var(--line-border-fill);
    transition: border-color 0.4s ease-in 0.3s;
}

参考链接：

var() - CSS：层叠样式表 | MDN (mozilla.org)

伪元素

在此例子中，使用到了::before在文档树中创建元素，用来显示灰色的进度条

.progress-container::before {
    content: '';
    background-color: var(--line-border-empty);

    position: absolute;
    top: 50%;
    left: 0;
    /*其实就是上移2px*/
    transform: translateY(-50%);

    width: 99.9%;
    height: 4px;

    z-index: -1;
    transition: width 0.4s ease-in-out;
}

参考链接：

伪元素 - CSS：层叠样式表 | MDN (mozilla.org)

伪类

伪类是添加到选择器的关键字，用于指定所选元素的特殊状态。例如，伪类 :hover 可以用于选择一个按钮，当用户的指针悬停在按钮上时，设置此按钮的样式。

在例子中使用到了2中伪类，分别是:active和:focus。

.btn:active {
    transform: scale(0.98);
}

.btn:focus {
    outline: 0;
}

参考链接：

伪类 - CSS：层叠样式表 | MDN (mozilla.org)

transform

CSS transform 属性允许你旋转，缩放，倾斜或平移给定元素。这是通过修改 CSS 视觉格式化模型的坐标空间来实现的。

在此例子中用来做数值居中效果的。

此例子中因为父容器使用到了flex布局，且指定了justify-content: space-between;，是的进度条和进度点平均分散在父容器当中。但是进度条不需要占用父容器的空间，所以需要进度条脱标。此时，就使用到了定位（position）。父容器使用相对定位，进度条作为子元素使用到了相对定位。进度条中指定top: 50%;，可以使进度条的上边框下移50%，但是因为进度条有4px的高度，为了动态适应，可以使用transform: tranformY(-50%)来将进度条再上移2px。

.progress-container {
    position: relative;
}

.progress {
    position: absolute;
    top: 50%;
    left: 0;
    /*其实就是上移2px*/
    transform: translateY(-50%);

    width: 99.9%;
    height: 4px;
}

参考链接：

transform - CSS：层叠样式表 | MDN (mozilla.org)

同样的，在做按钮点击动作的时候，也使用到了transform。

.btn:active {
    transform: scale(0.98);
}

按钮在激活的时候，会缩小一点点，以产生一个交互的效果。