使用动画创建分段控件

Question

我有一个相当简单的分段控制器式单选按钮设置.选择单选按钮后,该按钮将应用背景颜色.

如何获取背景颜色以动画到css中选定的单选按钮？

像这样:

的jsfiddle

input {
    display: none;
}
input:checked + .label {
    background-color: yellowGreen;
}

<label>
    <input type="radio" name="radioBtn" checked><span class="label">First Option</span>
</label>
<label>
    <input type="radio" name="radioBtn"><span class="label">Second Opetion</span>
</label>
<label>
    <input type="radio" name="radioBtn"><span class="label">Third Option</span>
</label>

更新

由于答案不足,我现在对JavaScript/JQuery开放.虽然如果你有一个纯粹的CSS解决方案,请发布它.

Answer 1

好吧，纯 CSS，看来我回来晚了，总比不回来好，JS Fiddle -更新 ^{（1）（2）}

更新代码：z-index为容器增加价值div#radios ⁽³⁾

body {
  background: #EEE url('//www.dailyfreepsd.com/wp-content/uploads/2013/09/underwater-blurred-background.jpg');
  background-size: cover;
}
#radios {
  position: relative;
  background-color: tomato;
  z-index: 5;
  width: 363px;
}
input {
  display: none;
}
#bckgrnd,
.labels {
  width: 120px;
  height: 30px;
  text-align: center;
  display: inline-block;
  padding-top: 10px;
  margin-right: -3px;
  z-index: 2;
  cursor: pointer;
  outline: 1px solid green;
}
#bckgrnd {
  background-color: orange;
  position: absolute;
  left: 0;
  top: 0;
  z-index: -1;
}
#rad1:checked ~ #bckgrnd {
  transform: translateX(0);
  transition: transform 0.5s ease-in-out;
}
#rad2:checked ~ #bckgrnd {
  transform: translateX(120px);
  transition: transform 0.5s ease-in-out;
}
#rad3:checked ~ #bckgrnd {
  transform: translateX(241px);
  transition: transform 0.5s ease-in-out;
}

<div id="radios">
  <input id="rad1" type="radio" name="radioBtn" checked>
  <label class="labels" for="rad1">First Option</label>
  <input id="rad2" type="radio" name="radioBtn">
  <label class="labels" for="rad2">Second Option</label>
  <input id="rad3" type="radio" name="radioBtn">
  <label class="labels" for="rad3">Third Option</label>
  <div id="bckgrnd"></div>
</div>

编辑：

⁽¹⁾对于较小的屏幕，如果下面垂直显示这些收音机，您可以使用某个断点进行媒体查询，而不是translateX()使用translateY().

⁽²⁾我下面的解决方案添加了一个 div<div id="bckgrnd"></div>作为容器#radiosdiv的最后一个孩子，你可以通过 javascript/jquery 添加，为此你可以添加这个 jquery：JS Fiddle 2 -更新

$(document).ready(function(){
    $('#radios').append('<div id="bckgrnd"></div>');
});

⁽³⁾z-index:;添加该值只是为了确保#bckgrnd-z-index:-1不会消失在divbody或任何包含#radiosdiv 的元素后面。所以现在我们可以为 body 设置背景图像，为容器 div 设置背景颜色而不必担心它..测试 JS Fiddle

Answer 2

这是一些东西。

label{
  position: relative;
  height:100%;
  display: block;
  height: 50px;
}

[type="radio"]{
  display: none;
  z-index: 5;
  position: relative;
}

[type="radio"] ~ span{
  transition: background .3s;
  height: 100%;
  display: -webkit-flex;
  display: flex;
  -webkit-justify-content: center;
  justify-content: center;
  -webkit-align-items: center;
  align-items: center;
  padding: 0 25px;
  z-index: 5;
  position: relative;
}

.bg{
  position: absolute;
  width: 100%;
  height: 100%;
  background: #7df5a7;
  top: 0;
  z-index: 0;
  left: 0;
  width: 0;
  transition: .3s width;
}

label:nth-child(1) .bg{
  right: 0;
  left: auto;
}

label:nth-child(2) .bg{
  left: 0;
}

[type="radio"]:checked + .bg{
  width: 100%;  
}

.wrap{
  border:1px solid #ddd;
  display: inline-flex;
  overflow:hidden;
  border-radius: 50px;
}

<div class="wrap">
  <label>
      <input type="radio" name="radioBtn" checked>
      <div class="bg"></div>
    <span class="label">First Option</span>
  </label>
  <label>
      <input type="radio" name="radioBtn">
          <div class="bg"></div>
  
    <span class="label">Second Option</span>
  </label>
</div>