body{/* 网页背景样式 */
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    width: 100%;
    background-color: #000;
    background-image: url(/triangles-l-background.svg);
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    /* backdrop-filter: blur(100px); */
}
a{
    text-decoration: none;
    color: aqua;
}
.title{/*标题栏内容样式*/
    width: 100%;
    height: 32px;
    display: flex;
    align-items:center;
    flex-wrap: nowrap;
    border-radius: 20px 20px 0px 0px;
    border-top: none;
    border-left: none;
    border-right: none;
}
.title a{
    display: flex;
    flex:1;
}
.href{/*标题栏标题样式*/
    height: 32px;
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size:18px;
    color:#fff;
    animation-name: out;
    animation-duration: 0.5s;
    border-radius: 20px 20px 20px 20px;
    border-bottom: none;
}
.href:hover{/*标题栏变化*/
    color:#FFF;
    background-color: rgba(30,30,30,1);
    animation-name: out;
    animation-duration: 0.5s;
}
@keyframes out{
    0%{
        opacity: 0;
    }
    100%{
        opacity: 1;
    }
}
@keyframes in{
    0%{

    }
    100%{

    }
}
#pale{
    height: 418px;
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: rgba(30, 30, 30, 1);
    border-radius: 20px 20px 20px 20px;
    backdrop-filter: blur(40px);
    position: relative;
    top:-32px;
}
.name{/* 底栏名字样式 */
    width: 100%;
    height: 50px;
    position: absolute;  bottom: 0;
    color: #090;
}
.world_box{/*main内容框样式*/
    border-radius: 20px;
    width: 800px;
    height: 418px;
    background-color:rgba(0,10,15,0.5);
    display: flex;
    flex-wrap: wrap;
    /* position:absolute;  块元素居中，现已更换为flex布局
    left:50%;  
    top:50%;  
    margin:-225px 0 0 -400px; */
    color:#fff;
    text-align: center;
    align-items: center;
    backdrop-filter: blur(12px);
    animation-name: example; 
    animation-duration: 2s;
    position: relative;
}
@keyframes example{
    30%{
        top: -100px;
        opacity: 0;
    }
    100%{
        top: 0px;
    }
}
.world_box #pale{
    animation-name: close; 
    animation-duration: 0.5s;
}
.world_box:hover #pale{
    animation-name: open; 
    animation-duration: 0.5s;
    top:0px;
}
@keyframes open{
    0%{top: -32px;}
    100%{top: 0px;}
}
@keyframes close{
    0%{top: 0px;}
    100%{top: -32px;}
}