Question

当它向右滑动时，方块会按预期变为圆形，但当它向左返回时，它会保持圆形而不是变为正方形。

另外，我只能点击<a>一次。如果我尝试多次点击，则无效。

尝试仅使用CSS（如果可能）。

body {
  margin-top: 30px;
  background: gainsboro;
}
.container {
  margin: auto;
  width: 100%;
}
.path {
  position: relative;
  overflow: hidden;
  width: 100%;
  height: 80px;
  x-background: white;
}
@keyframes ani {
  0% {
    left: 0;
  }
  50% {
    left: 95%;
  }
  100% {
    left: 0;
  }
}
.shape:target {
  border-radius: 50%;
  transition: all .7s ease-in-out;
  animation-name: ani;
  animation-duration: 2s;
  animation-direction: alternate;
  animation-fill-mode: none;
}
.shape {
  position: absolute;
  left: 0;
  background-color: slateblue;
  width: 80px;
  height: 80px;
  display: block;
  border-radius: none;
  transition: border-radius .4s ease-out;
}

<div class="container">
  <div class="path">
    <a href="#elem"><span id="elem" class="shape"></span></a>
  </div>
</div>

Answer 1

就我所知，最接近CSS的就是这个：

body {
  margin-top: 30px;
  background: gainsboro;
}
.container {
  margin: auto;
  width: 100%;
}
.path {
  position: relative;
  overflow: hidden;
  width: 100%;
  height: 80px;
  x-background: white;
}
@keyframes ani {
  0% {
    left: 0;
  }
  50% {
    left: 95%;
  }
  100% {
    left: 0;
  }
}
.path a:focus .shape {
  border-radius: 50%;
  transition: all .7s ease-in-out;
  animation-name: ani;
  animation-duration: 2s;
  animation-direction: alternate;
  animation-fill-mode: none;
}
.shape {
  position: absolute;
  left: 0;
  background-color: slateblue;
  width: 80px;
  height: 80px;
  display: block;
  border-radius: none;
  transition: border-radius .4s ease-out;
}

<div class="container">
  <div class="path">
    <a href="#" tabindex="-1"><span id="elem" class="shape"></span></a>
  </div>
</div>

之前的问题是使用:target:触发状态。这很难通过Codepen或其他嵌入式编辑器等网站进行调试，因为您无法看到哈希更改。基本上，点击该链接会将#elem附加到网址，将:target样式应用到.shape，并保持这样，直到哈希值发生变化。

此解决方案使用:focus，可让您更接近目标，但不是一直到目标。要重复动画，您需要对圆圈进行散焦/模糊，然后再次单击它。

我通常都只使用CSS效果，但我很确定你需要使用Javascript。像点击应用类，等待2秒，然后删除类一样简单，可以更可靠地完成相同的效果。

CSS转换不回归原始形状＆amp;无法单击多次

1 个答案: