CSS/JS 特效

1.hover时 滚动条从左往右

.top-Nav-Bar nav>ul>li>a:hover::after {

    display: block;

    content: '';

    position: absolute;

    /* bottom: 0; */

    top: 100%;

    left: 0;

    width: 100%;

    background: rgb(232, 103, 107);

    height: 3px;

    animation: menuSlide 0.25s;

}

@keyframes menuSlide {

    from {

        width: 0;

    }

    to {

        width: 100%;

    }

}

2. 子菜单从左滑到右  

.top-Nav-Bar li.active>.subMenu {

    display: block;

    animation: submenuSlide 0.3s;

}

/* 作品、博客菜单出现动画 */

@keyframes submenuSlide {

    from {

        /* transform: translateX(-50%); */

        margin-right: 100%;    // 这个是父亲的，烧脑。。暂不理解，相当于动画走了父亲主体的长度。

    }

    to {

        /* transform: translateX(0); */

        margin-right: 0%;

    }

}

注意：仅限于.top-Nav-Bar .subMenu {

    display: none;

    position: absolute;

    right: 0;     // 注意要用right 0 ， left 0 不行

....}