body{
    background-color: rgb(28, 28, 28);
    text-align: center;
}
#title{
    position:sticky;
    /*calc函数数字与符号之间要有空格*/
    top: 0%;
    left: calc(50% - 200px);
    z-index: 1;
    color: rgb(145, 255, 255);
    text-shadow: 0px 0px 10px rgb(255, 255, 255);
}


#ic{
    /*安放彩蛋*/
    position:sticky;
    bottom: 0px;
}

#hbg{
    position:relative;
    bottom:0px;
}

#egg{
    position: flex;
    flex-flow: column wrap;
    color:white;
}
.emp{
    width: 100%;
    height: 1000px;
}



.line{/*所有的blocks*/
    display:flex;
    flex-flow: row wrap;
    justify-content: center;
}
.blo{/*单个block*/
    outline:rgb(10, 156, 159) outset 5px;
    font-size: medium;
    background-color:rgb(45, 57, 68);
    color: aqua;
    transition: all 0.3s ease-out;
    
    height: 250px;
    width: 370px;
    margin-top: 10px;
    margin-bottom: 10px;
    margin-left: 20px;
    margin-right: 20px;
}

.nam{/*产品ID的样式*/
    position:relative;
    color: rgb(174, 234, 252);
    font-weight: bold;
    font-size: 60px;
    left: 0px;
    top:calc(50% - 30px);
}
.pro{/*产品的详细介绍*/
    position:relative;
    font-size: large;
    text-align: center;
    visibility: hidden;
}

.blo:hover{
    background-color:aquamarine;
    color:black;
}

.blo:hover>.nam{
    color: darkcyan;
    /*运用animation要为所有变化量设置始态
    offset-path可使用SVG的路径语法*/
    
    offset-path: path("M 180 110 Q 150 130 100 110 Q 20 80 30 0 ");
    animation: nammove 0.5s ease-out forwards alternate;
}

.blo:hover>.pro{
    visibility: visible;
}

@keyframes nammove {
    to {
        offset-distance: 100%;
        font-size: 30px;
    }
}