/* 网页的[导航栏] 的 动画 */
/* （navigationBar中的动画） */


/* [这是什么？]按钮的 box */
/* [当鼠标移出时] */
#navigationBar .whatIsIt .rect{
    /* 过渡 */
    transition: transform 0.1s,filter 0.1s;
    /* 变换 */
    transform: scale(1) translate(0px,0px);
    /* 滤镜 */
    filter: none;
}
/* [当鼠标进入时] */
#navigationBar .whatIsIt:hover .rect{
    /* 变换 */
    transform: scale(1) translate(0px,5px);
    /* 滤镜 */
    filter: brightness(80%);
}
/* [当鼠标点击时] */
#navigationBar .whatIsIt:active .rect{
    /* 变换 */
    transform: scale(0.75) translate(0px,10px);
}

/* [这是什么？]按钮的 文字 */
/* [当鼠标移出时] */
#navigationBar .whatIsIt .text{
    /* 过渡 */
    transition: transform 0.1s;
    /* 变换 */
    transform: translate(0px,0px);
}
/* [当鼠标进入时] */
#navigationBar .whatIsIt:hover .text{
    /* 变换 */
    transform: translate(0px,-5px);
}



/* [下载]按钮的 box */
/* [当鼠标移出时] */
#navigationBar .download .rect{
    /* 过渡 */
    transition: transform 0.1s,filter 0.1s;
    /* 变换 */
    transform: scale(1) translate(0px,0px);
    /* 滤镜 */
    filter: none;
}
/* [当鼠标进入时] */
#navigationBar .download:hover .rect{
    /* 变换 */
    transform: scale(1) translate(0px,6px);
    /* 滤镜 */
    filter: brightness(80%);
}
/* [当鼠标点击时] */
#navigationBar .download:active .rect{
    /* 变换 */
    transform: scale(0.75) translate(0px,6px);
}

/* [下载]按钮的 文字 */
/* [当鼠标移出时] */
#navigationBar .download .text{
    /* 过渡 */
    transition: transform 0.1s;
    /* 变换 */
    transform: translate(0px,0px);
}
/* [当鼠标进入时] */
#navigationBar .download:hover .text{
    /* 变换 */
    transform: translate(0px,-6px);
}



/* [其他]按钮的 box */
/* [当鼠标移出时] */
#navigationBar .other .rect{
    /* 过渡 */
    transition: transform 0.1s,filter 0.1s;
    /* 变换 */
    transform: translate(0px,0px);
    /* 滤镜 */
    filter: none;
}
/* [当鼠标进入时] */
#navigationBar .other:hover .rect{
    /* 变换 */
    transform: translate(0px,6px);
    /* 滤镜 */
    filter: brightness(80%);
}
/* [当鼠标点击时] */
#navigationBar .other:active .rect{
    /* 变换 */
    transform: translate(0px,6px);
}

/* [其他]按钮的 文字 */
/* [当鼠标移出时] */
#navigationBar .other .text{
    /* 过渡 */
    transition: transform 0.1s;
    /* 变换 */
    transform: translate(0px,0px);
}
/* [当鼠标进入时] */
#navigationBar .other:hover .text{
    /* 变换 */
    transform: translate(0px,-6px);
}



/* 框：语言 */
/* [当鼠标移出时] */
#navigationBar .other .language{
    /* 过渡 */
    transition: opacity 0.2s;
    /* 隐藏 */
    opacity: 0;
    visibility: hidden;
}
/* [当鼠标进入时] */
#navigationBar .other:hover .language{
    /* 显示 */
    opacity: 1;
    visibility: visible;
}

/* 按钮:[选择英文] */
/* [当鼠标移出时] */
#navigationBar .other .language .english{
    /* 过渡 */
    transition: transform 0.1s, border-color 0.1s;
    /* 变换 */
    transform: scale(1,1);
    /* 颜色 */
    border-color: transparent;
}
/* [当鼠标进入时] */
#navigationBar .other .language .english:hover{
    /* 颜色 */
    border-color: #4a463c;
}
/* [当鼠标点击时] */
#navigationBar .other .language .english:active{
    /* 变换 */
    transform: scale(0.85,0.75);
}

/* 按钮:[选择中文] */
/* [当鼠标移出时] */
#navigationBar .other .language .chinese{
    /* 过渡 */
    transition: transform 0.1s, border-color 0.1s;
    /* 变换 */
    transform: scale(1,1);
    /* 颜色 */
    border-color: transparent;
}
/* [当鼠标进入时] */
#navigationBar .other .language .chinese:hover{
    /* 颜色 */
    border-color: #4a463c;
}
/* [当鼠标点击时] */
#navigationBar .other .language .chinese:active{
    /* 变换 */
    transform: scale(0.85,0.75);
}