Question

我正在使用带有目标的滑动下划线的菜单上工作，我非常接近，但我无法让它反应灵敏。＆＃34;强调＆＃34;在调整窗口大小时，它不会粘在链接的中心。

nav {
    margin-top:30px;
    font-size: 15pt;
    background: #FFF;
    position: relative;
    width: 100%;
    height:50px;
}
nav a {
    text-align:center;
    background: #FFF;
    display: block;
    float: left;
    padding: 2% 0;
    width: 33.33%;
    text-decoration: none;
    transition: .4s;
    color: red;
}
 .effect {
    position: absolute;
    left: 22.5%;
    transition: 0.4s ease-in-out;
}
nav a:nth-child(1):target ~ .effect {
    left: 22.5%;
    /* the middle of the first <a> */
}
nav a:nth-child(2):target~ .effect {
    left: 56%;
    /* the middle of the second <a> */
}
nav a:nth-child(3):target ~ .effect {
    left: 90%;
    /* the middle of the third <a> */
}
.ph-line-nav .effect {
    width: 34px;
    height: 2px;
    bottom: 5px;
    background: blue;
    margin-left:-50px;
}

Answer 1

每个元素的宽度为33.33％。除以一半，即16.66％，这将是元素的中心。使用16.66％作为默认左值将.effect的左边缘放在第一个元素的中心。要将.effect置于真正的中心位置，请使用translateX()将其移回自己的50％。

所以第一个元素的左边应该是16.66％。

第二个元素是49.99％（99.99 / 2）

第三个元素是83.33％（99.99 - 16.6或66.66 + 16.66）

nav {
    margin-top:30px;
    font-size: 15pt;
    background: #FFF;
    position: relative;
    height:50px;
    display: flex;
}
nav a {
    text-align:center;
    background: #FFF;
    display: block;
    padding: 2% 0;
    flex-basis: 33.33%;
    text-decoration: none;
    transition: .4s;
    color: red;
}
 .effect {
    position: absolute;
    left: 16.66%;
    transition: 0.4s ease-in-out;
    transform: translateX(-50%);
}
nav a:nth-child(1):target ~ .effect {
    left: 16.66%;
    /* the middle of the first <a> */
}
nav a:nth-child(2):target~ .effect {
    left: 49.99%;
    /* the middle of the second <a> */
}
nav a:nth-child(3):target ~ .effect {
    left: 83.33%;
    /* the middle of the third <a> */
}
.ph-line-nav .effect {
    width: 34px;
    height: 2px;
    bottom: 5px;
    background: blue;
}

<nav class="ph-line-nav">
    <a href="#A1" id="A1">AA</a>
    <a href="#A2" id="A2">AA</a>
    <a href="#A3" id="A3">AA</a>
    <div class="effect"></div>
</nav>

带有下划线动画的响应式菜单

1 个答案: