使用伪css下划线菜单锚点动画

时间:2016-03-14 15:26:30

标签: css css3 animation css-animations

我在设置菜单项动画时遇到了困难,

fiddle

我需要的是,当用户点击菜单项时,悬停时出现的条形图会以动画切换到一边。

enter image description here

到目前为止,我有2个条形码,代码如下,开始后:之前结束,但我不能栏之前完成:之后开始点击(:有效和:焦点)

有没有人知道如何做到这一点?我尝试了jquery但没有成功。

HTML:

         <a class="item" href="http://www.google.com" title=" competências" target="_blank">
                <span class="nav-item">Competências</span>
            </a>
            <a class="item" href="" title=" Industrias" target="">
                <span class="nav-item">Industrias</span>
            </a>
            <a href="" title=" Soluções" target="">
                <span class="nav-item">Soluções</span>
            </a>
            <a class="item" href="" title=" About" target="">
                <span class="nav-item">About</span>
            </a>
            <a class="item" href="" title=" Parceiros" target="">
                <span class="nav-item">Parceiros</span>
            </a>
            <a class="item" href="" title=" Pessoas" target="">
                <span class="nav-item">Pessoas</span>
            </a>
            <a class="item" href="" title=" Contactos" target="">
                <span class="nav-item">Contactos</span>
            </a>
            <span class="skew-bar"></span>
            <a class="item" href="" title=" Blog" target="">
                <span class="nav-item">Blog</span>
            </a>
            <a class="item" href="" title=" Notícias" target="">
                <span class="nav-item">Notícias</span>
            </a>
            <a class="item" href="" title=" Recursos" target="">
                <span class="nav-item">Recursos</span>
            </a>
            <span class="skew-bar"></span>
            <a class="item" href="" title=" English" target="">
                <span class="nav-item">EN</span>
            </a>
        </nav>

CSS:

nav a {
    font-family: 'Roboto',sans-serif;
    font-size: 1em;
    font-weight: 300;
    text-decoration: none;
}

/*BEFORE ON HOVER*/
nav a span:before {
    border-bottom: 3px solid black;
    display: block;
    position: relative;
    z-index: 2;
    left: 0%;
    transform: translateY(22px);
    width: 1px;
    background: #000;
    overflow: hidden;
    content: '';
    filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=0);
    opacity: 0;
    -moz-transition: width 0.3s cubic-bezier(0.77, 0, 0.175, 1), opacity 0.1s linear 0.3s;
    -o-transition: width 0.3s cubic-bezier(0.77, 0, 0.175, 1), opacity 0.1s linear 0.3s;
    -webkit-transition: width 0.3s cubic-bezier(0.77, 0, 0.175, 1), opacity 0.1s linear;
    -webkit-transition-delay: 0s, 0.3s;
    transition: width 0.3s cubic-bezier(0.77, 0, 0.175, 1), opacity 0.1s linear 0.3s;
}


nav a span:hover::before {
    width: 50%;
    filter: progid:DXImageTransform.Microsoft.Alpha(enabled=false);
    opacity: 1;
    -moz-transition-delay: 0s;
    -o-transition-delay: 0s;
    -webkit-transition-delay: 0s;
    transition-delay: 0s;
    position:relative;
    overflow: hidden;
}


/*BEFORE ON CLICK FOCUS*/
nav a span:after {
    border-bottom: 3px solid black;
    display: block;
    position: relative;
    z-index: 2;
    left: 50%;
    transform: translateY(-3px);
    width: 1px;
    background: #000;
    overflow: hidden;
    content: '';
    filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=0);
    opacity: 0;
    -moz-transition: width 0.3s cubic-bezier(0.77, 0, 0.175, 1), opacity 0.1s linear 0.3s;
    -o-transition: width 0.3s cubic-bezier(0.77, 0, 0.175, 1), opacity 0.1s linear 0.3s;
    -webkit-transition: width 0.3s cubic-bezier(0.77, 0, 0.175, 1), opacity 0.1s linear;
    -webkit-transition-delay: 0s, 0.3s;
    transition: width 0.3s cubic-bezier(0.77, 0, 0.175, 1), opacity 0.1s linear 0.3s;
}


nav a span:active::after,nav a span:focus::after {
    width: 50%;
    filter: progid:DXImageTransform.Microsoft.Alpha(enabled=false);
    opacity: 1;
    -moz-transition-delay: 0s;
    -o-transition-delay: 0s;
    -webkit-transition-delay: 0s;
    transition-delay: 0s;
    position:relative;
    overflow: hidden;
}

3 个答案:

答案 0 :(得分:1)

焦点位于.item而不是span,因此您的选择器应该像

nav a:focus span::after 

这里有代码https://jsfiddle.net/Lc9gp8fb/9/

- 编辑 -

通过此次更新,您可以向右关闭:before

我设置为nav a span:before

margin-right: 50%;
float: right;

要将它保持在中间,当悬停时我设置

float: left;

所以,当它悬停时它会有float: left;并且动画将从左到右,当它没有悬停时,动画也将从左到右,因为它将具有{{1} }

https://jsfiddle.net/Lc9gp8fb/15/

答案 1 :(得分:1)

问题是:在单纯css后,活动状态不会持续存在,你需要使用javascript来结束动画。

答案 2 :(得分:0)

哟shold试图绝对地定位伪元素:

nav a {
    font-family: 'Roboto',sans-serif;
    font-size: 1em;
    font-weight: 300;
    text-decoration: none;

    position: relative
}

nav a span:before {
    content:'';
    display:block;
    position:abolute;
    top:100%;
    height:3px;
    background-color:#000000;

    transition: all .3s cubic-bezier(0.77, 0, 0.175, 1);
    -webkit-transition: all .3s cubic-bezier(0.77, 0, 0.175, 1);
    -moz-transition: all .3s cubic-bezier(0.77, 0, 0.175, 1);
    -o-transition: all .3s cubic-bezier(0.77, 0, 0.175, 1);
}
nav a span:before {
    left: 0%;
    right: 100%;
}
nav a:hover span:before {
    right: 50%;
}
nav a span:after {
    left: 100%;
    right: 0%;
}
nav a:active span:after {
    left: 50%;
}

这将使点击时的宽度为100%,悬停时为50%。这是你要找的吗?