时间戳

首页 > 解决方案 > 带有点击的箭头动画

css - 带有点击的箭头动画

问题描述

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

.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的代码

标签： cssanimation

解决方案

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 -> &.clicked 在第 53 行

推荐阅读