1.hover時(shí) 滾動(dòng)條從左往右
.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;
}
/*?作品乐疆、博客菜單出現(xiàn)動(dòng)畫?*/
@keyframes?submenuSlide?{
????from?{
????????/*?transform:?translateX(-50%);?*/
????????margin-right:?100%;? ? // 這個(gè)是父親的坯癣，燒腦瞧筛。路克。暫不理解，相當(dāng)于動(dòng)畫走了父親主體的長(zhǎng)度。
????}
????to?{
????????/*?transform:?translateX(0);?*/
????????margin-right:?0%;
????}
}
注意：僅限于.top-Nav-Bar?.subMenu?{
????display:?none;
????position:?absolute;
????right:?0;? ? ?// 注意要用right 0 ， left 0 不行
....}
