Question

我的css就在这里

＆＃13;

#hamburger {
  box-sizing: border-box;
  display: none;
  width: 60px;
  height: 50px;
  left: 0;
  margin: 0;
  z-index: 2;
}
#hamburger:before, #hamburger:after, #hamburger span {
  background: #fff;
  content: '';
  display: block;
  width: 30px;
  height: 3px;
  position: absolute;
  left: 15px;
}
#hamburger:before {
  top: 13px;
}
#hamburger span {
  top: 23px;
}
#hamburger:after {
  top: 33px;
}
#hamburger:before, #hamburger:after, #hamburger span {
  -webkit-transition: none 0.5s ease 0.5s;
  transition: none 0.5s ease 0.5s;
  -webkit-transition-property: transform, top, bottom, left, opacity;
  transition-property: transform, top, bottom, left, opacity;
}

/* Hamburger animation */
html.mm-opening #hamburger:before, html.mm-opening #hamburger:after {
  top: 23px;
}
html.mm-opening #hamburger span {
  opacity: 0;
}
html.mm-opening #hamburger:before {
  transform: rotate(45deg);
}
html.mm-opening #hamburger:after {
  transform: rotate(-45deg);
}

＆＃13;

<a id="hamburger" class="mm-fixed mm-slideout" href="#menu"><span></span></a>

＆＃13;

通过单击汉堡包图标，可以看到一个工作示例http://mmenu.frebsite.nl/测试的链接 - 在除safari之外的所有浏览器中工作

如何让它在Safari上运行？

Answer 1

 -webkit-transform: rotate(-45deg)

作为解决问题的方法。通过@ DomlThe-Bread

Safari浏览器不支持伪元素的转换？

1 个答案: