html - 单击时将背景幻灯片设置为药丸

Question

我正在尝试在单击按钮时制作一个小动画。

为了说明用户的选择，我想让背景左右滑动。

这是我的试用版:JSFiddle

$(".test").click(function() {
  $(".test").removeClass('active');
  $(this).addClass('active');
})

div{
  list-style-type: none;
}
div a {
  text-decoration: none;
}
#cont {
  background-color: white;
  width: 100%;
  padding: 2px;
  height: 40px;
  -webkit-border-radius: 20px;
  -moz-border-radius: 20px;
  border-radius: 20px;
}
.choice {
  float: left;
  margin-right: 1px;
}
.choice div{
  width: 100px;
  padding: 11px 16px;
  text-align: center;
  float: left;
  background: #ff3232;
  margin-left: 10px;
  transition: all 0.4s linear;
  -webkit-border-radius: 20px;
  -moz-border-radius: 20px;
  border-radius: 20px;
}
.choice .left {
  background: linear-gradient(to right, white 50%, #b7d4e1 50%);
  background-size: 200% 100%;
  background-position: left bottom;
}
.choice .right {
  background: linear-gradient(to right, #b7d4e1 50%, white 50%);
  background-size: 200% 100%;
  background-position: right bottom;
}
.choice .left.active {
  background-position: right bottom;
}
.choice .right.active {
  background-position: left bottom;
}
.choice div a {
  color: black;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="choice">
  <div id="cont">
    <div class="test left active"><a href="#">Semaine</a>
        </div>
    <div class="test right"><a href="#">Mois</a>
        </div>
  </div>
</div>

但我希望背景在整个幻灯片中都保持丸状。

Answer 1

根据您的用例，您可以在没有 JS 的情况下制作一个药丸突出显示点击的元素。
重点是使用 CSS transitions玩transition delay这样药丸就会停留在最后一个焦点链接下。

药丸是用额外的跨度和 border-radius 制成的。在重点链接下翻译:

.choice{
  background-color: white;
  float: left;
  padding: 2px;
  height: 40px;
  border-radius: 20px;
  position:relative;
  z-index:1;
}
.link {
  width: 100px;
  padding: 11px 16px;
  text-align: center;
  float: left;
  text-decoration:none;
  color:#000;
}
.pill{
  position:absolute;
  left:16px; top:0;
  width:100px; height:100%;
  background:#B7D4E1;
  border-radius:20px;
  z-index:-1;
  transition: 9999s transform .2s ease-out;
}
.link:nth-child(2):focus ~ .pill{
  transform: translatex(132px);
  transition: transform .18s ease-out;
}
.link:nth-child(1):focus ~ .pill{
  transform: translatex(0px);
  transition: transform .18s ease-out;
}

<div class="choice">
  <a class="link" href="#">Semaine</a>
  <a class="link" href="#">Mois</a>
  <span class="pill"></span>
</div>