18.纯 CSS 创作 404 文字变形为 NON 文字的交互特效

原文地址：https://segmentfault.com/a/1190000014818274

感想： positon：absolute  和 :hover 

HTML代码:

<!-- <section> 标签定义了文档的某个区域。比如章节、头部、底部或者文档的其他区域。 -->
<section class="four-zero-four">
    <p class="four">
        <span></span>
        <span></span>
        <span></span>
    </p>
    <p class="zero">
        <span></span>
        <span></span>
        <span></span>
        <span></span>
    </p>
    <p class="four">
        <span></span>
        <span></span>
        <span></span>
    </p>
</section>

CSS代码：

html, body {
    margin: 0;
    padding: 0;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    /* 背景：线性渐变（灰色、黑色） */
    background: linear-gradient(gray, black);
}
.four-zero-four p {
    width: 10em;
    height: 10em;
    /* border: 1px dashed white; */
    display: inline-block;
    margin: 1em;
    position: relative;
}
/* 设置笔画共有属性 */
.four-zero-four p span {
    position: absolute;
    box-sizing: border-box;
    filter: opacity(0.8);
}
/* 数字 4 的笔画 */
.four span:nth-child(1){
    width: 20%;
    height: 80%;
    /* left: 10%; */
    background-color: yellowgreen;
}
.four span:nth-child(2) {
    width: 100%;
    height: 20%;
    bottom: 20%;
    background-color: turquoise;
}
.four span:nth-child(3) {
    width: 20%;
    height: 100%;
    right: 30%;
    background-color: pink;
}
/* 画出 0 的笔画 */
.zero span:nth-child(1) {
    width: 20%;
    height: 100%;
    background-color: skyblue;
}
.zero span:nth-child(2) {
    width: 100%;
    height: 20%;
    background-color: plum;
}
.zero span:nth-child(3) {
    width: 20%;
    height: 100%;
    right: 0%;
    background-color: lightcoral;
}
.zero span:nth-child(4) {
    width: 100%;
    height: 20%;
    bottom: 0%;
    background-color: peachpuff;
}
/* 设置划过数字时笔划的变化效果 */
.four-zero-four:hover span {
    /* border: 1px solid black; */
    background-color: whitesmoke;
    /* filter: opacity(0.8); */
    transition: 0.3s;
}
/* 设置划过数字时笔划的偏移量 */
section:hover .four span:nth-child(1){
    left: 0;
    top: 20%;
}
section:hover .four span:nth-child(2) {
    top: 0;
}
section:hover .four span:nth-child(3) {
    right: 0;
}
section:hover .zero span:nth-child(1) {
    left: 0;
}
section:hover .zero span:nth-child(2) {
    top: 0;
}
section:hover .zero span:nth-child(3) {
    right: 0;
}
section:hover .zero span:nth-child(4) {
    bottom: 0;
}