Question

嗨我有动画的三个点的菜单。当我点击三个点时，我必须转换为X.演示链接是：demo

HTML：

<div class="dots">
  <div class="dot"></div>
</div>

CSS：

html, body {
  height: 100%;
  background: black;
}

.dots {
  position: absolute;
  right: 20px;
}

.dot,
.dot:before,
.dot:after {
   position: absolute;
   width: 6px;
   height: 6px;
   border-radius: 20px;
   background-color: #fff;
   transform: rotate(270deg);
   cursor: pointer;
}

.dot {
  top: 50px;
  right: 0;
}

.dot:before,
.dot:after {
   content: "";
}

.dot:before {
  right: 10px;
  transition: right .3s ease-out;
}

.dot:after {
  left: 10px;
  transition: left .3s ease-out;
}

.dots:hover .dot:before {
  right: -10px;
}

.dots:hover .dot:after {
   left: -10px;
}

在悬停时的当前代码中，点从左向右移动。我想要的是悬停点，应该从它的位置移动，然后在点击时转换为X.困惑如何解决这个问题我想要hamberger菜单，但用点而不是三行。有什么建议吗？

Answer 1

所以作者证实，以下小提琴解决了这个问题： https://jsfiddle.net/dhmr44ua/6/

HTML：

<div class="dots">
 <label for="toggle"></label>
 <input id="toggle" type="checkbox" />
 <div class="dot"></div>
</div>

CSS：

html, body {
  height: 100%;
  background: black;
}

.dots {
  position: absolute;
  right: 20px;
}

.dots input[type=checkbox] {
  position: absolute;
  top: -9999px;
  left: -9999px;
}

.dots label { 
  display: inline-block;
  cursor: pointer;
  position: absolute;
  width: 15px;
  height: 32px;
  top: 38px;
  left: -10px;
  z-index: 999;
}

.dot,
.dot:before,
.dot:after {
  position: absolute;
  width: 6px;
  height: 6px;
  border-radius: 20px;
  background-color: #fff;
  transform: rotate(270deg);
  cursor: pointer;
}

.dot {
  top: 50px;
  right: 0;
}

.dot:before,
.dot:after {
  content: "";
}

.dot:before {
  right: 10px;
  transition: right .3s ease-out, width .3s ease-out;
}

.dot:after {
  left: 10px;
  transition: left .3s ease-out, width .3s ease-out;
}

.dots:hover .dot:before {
  right: -10px;
}

.dots:hover .dot:after {
  left: -10px;
}

.dots input[type=checkbox]:checked ~ .dot:before {
  right: -8px;
  width: 22px;
  transform: rotate(225deg);
}

.dots input[type=checkbox]:checked ~ .dot:after {
  left: -8px;
  width: 22px;
  transform: rotate(135deg);
}

我使用了这个答案中提到的css复选框技巧：https://stackoverflow.com/a/13975505/1293849

使用css将三个点转换为X符号

1 个答案: