Question

如何将精美的变换动画菜单图标设为箭头？

E.g：

<div class="menu">
    <div></div>
    <div></div>
    <div></div>
</div>

当菜单关闭时 - 这是3条水平线（汉堡图标），当 .menu.opened 时 - 顶部和底部div转换为右箭头。

CSS怎么做？

Answer 1

这是我的问题的简单解决方案

＆＃13;

public partial class SchoolDBEntities : DbContext
{
    public SchoolDBEntities(): base("name=SchoolDBEntities")
    {
        this.Configuration.LazyLoadingEnabled = true;
    }
}

＆＃13;

$(document).ready(function() {
  $('.menuToggle').on('click', function() {
    $(this).toggleClass('active');
  });
});

＆＃13;

.menuToggle {
  cursor: pointer;
  height: 40px;
  width: 50px;
  position: fixed;
  left: 25px;
  top: 25px;
}
.menuToggle span {
  display: block;
  height: 0.4rem;
  position: absolute;
  width: 3rem;
  -webkit-transition: margin .5s ease-in-out, width .5s ease-in-out, -webkit-transform .5s ease-in-out;
  transition: margin .5s ease-in-out, width .5s ease-in-out, -webkit-transform .5s ease-in-out;
  transition: margin .5s ease-in-out, width .5s ease-in-out, transform .5s ease-in-out;
  transition: margin .5s ease-in-out, width .5s ease-in-out, transform .5s ease-in-out, -webkit-transform .5s ease-in-out;
}
.menuToggle span:nth-child(2) {
  margin-top: 0.9rem;
}
.menuToggle span:nth-child(3) {
  margin-top: 1.8rem;
}
.menuToggle.active span:nth-child(odd) {
  margin-left: 1.5rem;
  width: 1.5rem;
}
.menuToggle.active span:nth-child(1) {
  margin-top: 0.5rem;
  -webkit-transform: rotate(30deg);
  transform: rotate(30deg);
}
.menuToggle.active span:nth-child(3) {
  margin-top: 1.3rem;
  -webkit-transform: rotate(-30deg);
  transform: rotate(-30deg);
}
.menuToggle span {
  background-color: #777;
  border-radius: 5px;
}
.menuToggle.active span {
  background-color: black;
}

＆＃13;

Demo

如何将菜单图标转换为箭头图标？

1 个答案: