1

当用户将窗口大小调整为小宽度时，我正在尝试使用纯 CSS的菜单打开按钮做一些事情：使跨度从水平线旋转成十字形。提琴手

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。然后它突然成形。关闭检查窗口也会触发此操作。但是，更改翻译值似乎可以解决它。为什么会这样？

4

1 回答 1

0

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

于 2013-10-30T20:19:06.250 回答