onclick effect using just css-CodePudding

I'm trying to increases my skill on html and CSS, i wanted to have on click effect using just css. i know the way to do so using JavaScript put wondering if there is a way to do so using just css

.frame {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 400px;
  height: 400px;
  margin-top: -200px;
  margin-left: -200px;
  border-radius: 2px;
  box-shadow: 4px 8px 16px 0 rgba(0, 0, 0, 0.1);
  overflow: hidden;
  background: #fff;
  color: #333;
  font-family: "Open Sans", Helvetica, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  background-color: #3faf82;
  border-radius: 10px;
}

.center {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.box {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 15px;
}

.box:hover {
  cursor: pointer;
}

.box:active span:nth-child(1) {
  transform: translate3d(0, 25px, 0) rotate(45deg);
}

.box:active span:nth-child(2) {
  opacity: 0;
}

.box:active span:nth-child(3) {
  transform: translate3d(0, -25px, 0) rotate(-45deg);
}

span {
  margin: auto;
  height: 10px;
  width: 110px;
  background-color: #ffff;
  border-radius: 10px;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
  transition: transform 0.2s ease-in-out;
}

<div >
  <div >
    <div >
      <span></span>
      <span></span>
      <span></span>
    </div>

  </div>
</div>

I thought :active CSS pseudo-class would work but the effect only lasts when your clicking it if not clichéd it goes back to normal. my desired result is on one click to change on another cilice to go back to the original style. is that possible to be obtained using just CSS or am i wasting my time.

CodePudding user response：

Yes, it is possible using an invisible input type checkbox so that with the pseudo class checked it acts as a trigger to activate and deactivate the animation, as follows:

.frame {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 400px;
  height: 400px;
  margin-top: -200px;
  margin-left: -200px;
  border-radius: 2px;
  box-shadow: 4px 8px 16px 0 rgba(0, 0, 0, 0.1);
  overflow: hidden;
  background: #fff;
  color: #333;
  font-family: "Open Sans", Helvetica, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  background-color: #3faf82;
  border-radius: 10px;
}

.center {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.box {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 15px;
  z-index: 1;
}
#label{
  position: absolute;
  top: -50px;
  left: -50px;
  width: 200%;
  height: 200%;
  cursor: pointer;
  z-index: 10;
}

#toggle:checked   label   .box span:nth-child(1) {
  transform: translate3d(0, 25px, 0) rotate(45deg);
}

#toggle:checked   label   .box span:nth-child(2) {
  opacity: 0;
}

#toggle:checked   label   .box span:nth-child(3) {
  transform: translate3d(0, -25px, 0) rotate(-45deg);
}

#toggle {
  display:none;
}

span {
  margin: auto;
  height: 10px;
  width: 110px;
  background-color: #ffff;
  border-radius: 10px;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
  transition: transform 0.2s ease-in-out;
}

<div >
  <div >
    <input id='toggle' type='checkbox'>
    <label for='toggle' id="label"></label>
    <div >
      <span></span>
      <span></span>
      <span></span>
    </div>
  </div>
</div>