onclick效果只使用css

zy1mlcev 于 2023-01-06 发布在其他

关注(0)|答案(1)|浏览(131)

我试图增加我的HTML和CSS的技能，我想有点击效果只使用css。我知道这样做的方式使用JavaScript把想知道是否有一种方法这样做只使用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 class="frame">
  <div class="center">
    <div class="box">
      <span></span>
      <span></span>
      <span></span>
    </div>

  </div>
</div>

我以为**：active**CSS伪类会工作，但效果只持续当你点击它，如果不是陈词滥调，它会回到正常。我想要的结果是在一个点击改变另一个cilice回到原来的风格。这是可能的，只使用CSS或我浪费我的时间。

css

来源：https://stackoverflow.com/questions/75017917/onclick-effect-using-just-css

1条答案

按热度按时间

kr98yfug1#

是的，可以使用不可见的输入类型复选框，以便在伪类checked的情况下充当激活和停用动画的触发器，如下所示：

.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 class="frame">
  <div class="center">
    <input id='toggle' type='checkbox'>
    <label for='toggle' id="label"></label>
    <div class="box">
      <span></span>
      <span></span>
      <span></span>
    </div>
  </div>
</div>

赞(0）回复(0）举报 2023-01-06

我来回答

onclick效果只使用css

1条答案

相关问题

热门标签

最新问答