html {
    & .box {
        font-size: 12px;
        right: -150px;
        top: 0px;
        bottom: 0px;
        margin: auto 0;
        padding: 6px;
        position: fixed;
        width: 150px;
        height: 16em;
        border-radius: 16px; 
        backdrop-filter: blur(2px);
        box-shadow: 2px 3px 6px #808080; 
        background-color: rgba(0, 255, 255, 0.05);
        transition: right .3s;

        & ul {
            list-style: none;

            & a {
                text-decoration:none;
                
                &:link {color:#000000;} /* 未访问的链接 */
                &:visited {color:#FF0000;} /* 已访问的链接 */
                &:hover {color:#FF00FF;} /* 鼠标划过链接 */
                &:active {color:#0000FF;} /* 已选中的链接 */
            }

            & li {
                margin: 1em 0.5em;
                padding: 0px .5em;S
                min-height: 2em;
                line-height: 2em;
                border-radius: .5em; 
                background-color: rgba(0, 255, 255, 0.3);
                backdrop-filter: blur(3px);
                box-shadow: 2px 3px 6px #808080; 
                transition: all .2s;

                &:hover {
                background-color: aqua;
                box-shadow: 3px 5px 6px #808080; 
                transform: translateY(-2px) scale(1.1,1.1);
                }
            }
        }

        &:hover {
            right: 3px;
        }

        &::after {
            content: "⌀";
            position: absolute;
            top: 3px;
            right: 6px;
        }
    }
}

/* 注册自定义属性 */
@property --scroll-position {
    syntax: "<number>";
    inherits: true;
    initial-value: 0;
}
/* 属性值过渡动画 */
@keyframes scroll-variation {
    to {
        --scroll-position: 1;
    }
}
body {
    /* 滚动驱动过渡动画 */
    animation: scroll-variation 1s linear;
    animation-timeline: scroll();
    &::after{
        /* CSS计数器显示属性值 */
        position: fixed;
        right: 0px;
        bottom: 6px;
        font-size: 12px;
        padding: 3px 6px;
        border-radius: 10px 0px 0px 10px;
        color: #fff;
        background-color: rgba(66, 66, 66, 0.1);
        backdrop-filter: blur(6px);
        counter-reset: scroll-position calc(var(--scroll-position) * 100);
        content: counter(scroll-position) "%";
        /* 属性值为零收起显示 */
        transform: translateX(100%) translateX(calc(var(--scroll-position) / var(--scroll-position) * -100%));
        transition: transform 0.2s;
    }
}