Question

当用户将窗口调整到一个较小的宽度时，我正尝试使用菜单打开按钮执行pure-css所具有的功能：使跨度从水平线旋转成十字形。 JsFiddle

HTML

<div class="navigation">
    <a href="#"><span></span></a>
</div>

CSS

.navigation a > span,
.navigation a > span::before,
.navigation a > span::after {
    width: 30px;
    height: 5px;
    transition: all 0.8s;
    background-color: gray;
}

.navigation a > span::before, .navigation a > span::after {
    content: " ";
    margin-top: -10px;
    margin-left: 0;
}
.navigation a > span::after {
    margin-top: 10px;
}

.navigation a.selected > span {
    -webkit-transform: rotate(45deg) translate(1px);
}
.navigation a.selected > span::before {
    background-color: white;
    -webkit-transform: rotate(-90deg) translate(20px, -1px);
}
.navigation a.selected > span::after {
    display: none;
}

奇怪的是'X'形状没有正确形成 - 直到我做right click -> inspect element。然后它成型。关闭检查窗口也会触发此操作。然而，Changing the translate值似乎解决了这个问题。为什么会这样？

Answer 1

考虑在a框中包含伪元素而不是span。 jsFiddle（需要一些抛光）。

在浏览器中检查元素之前，转换不会完成

1 个答案: