1

ユーザーがウィンドウのサイズを小さな幅に変更したときに、メニューを開くボタンでpure-cssが持つようなことをしようとしています:スパンを水平線から十字に回転させます。Jsフィドル

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 に答える