Question

我绝对是新手，这是我的第一个代码：

.container_menu {
  position: relative;
  top: 0px;
  left: 0px;
  width: 25px;
  height: 25px;
}
.container_menu .line-1 {
  background-color: black;
  width: 59%;
  height: 2px;
  position: absolute;
  top: 50%;
  left: 0;
  -webkit-transform: rotate(45deg);
  -moz-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  -o-transform: rotate(45deg);
  transform: rotate(45deg);
  -webkit-transition: all 0.3s ease 0s;
  -moz-transition: all 0.3s ease 0s;
  -o-transition: all 0.3s ease 0s;
  transition: all 0.3s ease 0s;
}
.container_menu .line-2 {
  background-color: black;
  width: 59%;
  height: 2px;
  position: absolute;
  top: 50%;
  right: 0;
  -webkit-transform: rotate(-45deg);
  -moz-transform: rotate(-45deg);
  -ms-transform: rotate(-45deg);
  -o-transform: rotate(-45deg);
  transform: rotate(-45deg);
  -webkit-transition: all 0.3s ease 0s;
  -moz-transition: all 0.3s ease 0s;
  -o-transition: all 0.3s ease 0s;
  transition: all 0.3s ease 0s;
}
.container_menu:hover .line-1 {
  -webkit-transform: rotate(-45deg);
  -moz-transform: rotate(-45deg);
  -ms-transform: rotate(-45deg);
  -o-transform: rotate(-45deg);
  transform: rotate(-45deg);
}
.container_menu:hover .line-2 {
  -webkit-transform: rotate(45deg);
  -moz-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  -o-transform: rotate(45deg);
  transform: rotate(45deg);
}

<div class="container_menu">
  <div class="line-1"></div>
  <div class="line-2"></div>
</div>

如何通过单击（也许是JS？）而不是悬停来制作动画？

我将在网站菜单中使用它。

我认为我必须使用JS代码。但是我不知道该如何实现。也许您可以帮助我，非常感谢。

来自https://codepen.io/defaultdave/pen/baXLPQ的代码

Answer 1

https://codepen.io/Tanded/pen/OqVBPE

<div class="container" onclick="fnc(this)">
  <div class="line-1"></div>
  <div class="line-2"></div>
</div>

function fnc(el){
  el.classList.toggle("clicked");
}

添加了一个小的js函数来切换类，并在单击类而不是将鼠标悬停在行上时编辑css以使其行动画＆：hover->＆。单击第53行

单击动画的箭头

1 个答案: