转换汉堡图标失败 [英] Transforming a hamburger icon fails
本文介绍了转换汉堡图标失败的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
由于某种原因,我的汉堡包图标无法正常工作。我已经看到了很多方法,但是我无法弄清楚我的问题是什么。这是我得到的结果:
for some reason I can't make my hamburger icon work as expected. I have saw many ways of doing it but I can't figure out what's wrong with mine. this is the result I get:
我当然希望得到'X'。
I expect to get the 'X' of course.
.hamb span {
background-color: black;
width: 50px;
height: 5px;
display: block;
margin-bottom: 10px;
transition: 0.5s;
}
.hamb:hover span:nth-child(1) {
transform: rotate(45deg);
}
.hamb:hover span:nth-child(3) {
transform: rotate(-45deg);
}
.hamb:hover span:nth-child(2) {
transform: translateX(30px);
opacity: 0;
}
.hamb:hover {
cursor: pointer;
}
<div class="nav-item icon">
<div class="hamb"><span></span> <span></span> <span></span></div>
</div>
推荐答案
您应该在第一个和最后一个跨度中添加一些翻译:
You should add some translation to the first and last span:
.hamb {
margin:10px;
}
.hamb span {
background-color: black;
width: 50px;
height: 5px;
display: block;
margin-bottom: 10px;
transition: 0.5s;
}
.hamb:hover span:nth-child(1) {
transform: rotate(45deg) translateY(21px);
}
.hamb:hover span:nth-child(3) {
transform: rotate(-45deg) translateY(-21px);
}
.hamb:hover span:nth-child(2) {
transform: translateX(30px) ;
opacity: 0;
}
.hamb:hover {
cursor: pointer;
}
<div class="hamb">
<span></span>
<span></span>
<span></span>
</div>
这篇关于转换汉堡图标失败的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文