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 不行
....}
网友评论