我使用HTML中的纯SVG代码设计了一个三栏图标。 我使用CSS3转换将顶部和底部栏旋转成X形状。 问题是它们围绕自己的中心旋转,但我需要它们围绕图标的中心旋转。 为了解决这个问题,我调整了它们的X / Y坐标。
我认为更改X/Y坐标会导致模糊效果。 我已经添加了下面的屏幕截图。 首先,您将看到完成的X图标,然后您将看到将其动画返回默认值时它的外观。
柱子不是完全直的,而是因为某种原因看起来弯曲。 此处放置屏幕截图 我对SVG操作仍然很陌生,因此我不确定如何使用CSS3 / JS正确旋转
这会导致Internet Explorer,Firefox和Safari出现很多错误问题。 Chrome似乎没问题,但显然我想以“正确”的方式编写代码,以便在所有浏览器中都可以正常工作。
HTML
<svg id="burgericon" xmlns="http://www.w3.org/2000/svg" width="90" height="80">
<g class="icon">
<rect class="frstbar" x="10" y="10" width="70" height="12" rx="7" ry="7" fill="#414141"/>
<rect class="scndbar" x="10" y="35" width="70" height="12" rx="7" ry="7" fill="#414141"/>
<rect class="thrdbar" x="10" y="60" width="70" height="12" rx="7" ry="7" fill="#414141"/>
</g>
</svg>
CSS
.hamburger { display:block; text-align:center; }
svg { cursor:pointer; }
.frstbar, .scndbar, .thrdbar {
-webkit-transition: all 0.35s linear;
-moz-transition: all 0.35s linear;
-o-transition: all 0.35s linear;
transition: all 0.35s linear;
}
#burgericon.open .frstbar {
-webkit-transform: rotate(45deg);
-ms-transform: rotate(45deg);
transform: rotate(45deg);
}
#burgericon.open .thrdbar {
-webkit-transform: rotate(-45deg);
-ms-transform: rotate(-45deg);
transform: rotate(-45deg);
}
#burgericon.open .scndbar { width: 0; opacity: 0; }
JS
$('#burgericon').on('click', function(e) {
if($(this).attr('class') != "open") {
$(this).attr('class','open');
$('.frstbar').attr('x','25').attr('y','-5');
$('.thrdbar').attr('x','-35').attr('y','55');
}
else {
$(this).attr('class','default');
$('.frstbar').attr('x','10').attr('y','10');
$('.thrdbar').attr('x','10').attr('y','60');
}
});
我认为更改X/Y坐标会导致模糊效果。 我已经添加了下面的屏幕截图。 首先,您将看到完成的X图标,然后您将看到将其动画返回默认值时它的外观。
柱子不是完全直的,而是因为某种原因看起来弯曲。 此处放置屏幕截图 我对SVG操作仍然很陌生,因此我不确定如何使用CSS3 / JS正确旋转
<rect>
元素。 任何帮助或指向正确方向的提示都将不胜感激。
transition-timing-function
无法使过渡效果完美结束。在我的有限测试中,切换到默认的 ease 看起来可以解决这个问题。 - andyb