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 不行
....}
