Boost.Python：封装函数释放GIL(Boost.Python: Wrap functions to release the GIL)

 好的，纯CSS，似乎我回来晚了，还是比不回来， JS Fiddle - 更新 （1）（2） 
 
 更新代码 ：将z-index值添加到容器div#radios （3） 
 
 
 
 
  
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>
 
 
 
 
 
 
 编辑： 
 
 （1）对于较小的屏幕，如果下面垂直显示这些无线电，则可以使用某个断点进行媒体查询，而不是translateX()使用translateY() 。 
 
 （2）我的下面的解决方案添加一个div <div id="bckgrnd"></div>作为容器#radios div的最后一个孩子，您可以通过javascript / jquery添加，而是添加此jquery： JS小提琴2 - 更新 
 
$(document).ready(function(){
    $('#radios').append('<div id="bckgrnd"></div>');
});
 
 （3） z-index:; 值只是为了确保具有z-index:-1的#bckgrnd不会消失在body后面或任何包含#radios div的元素。 所以现在我们可以设置一个背景图像的身体和一个背景颜色到一个容器div而不用担心它。Test JS小提琴 

Ok, Pure CSS, seems I came back late, still better than not coming back, JS Fiddle-Updated (1) (2)
 
Updated Code: added z-index value to the container div#radios (3) 
 
 
 
 
  
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>
 
 
 
 
 
 
Edit: 
 
(1) For smaller screens you can make a media query with a certain break point if below show these radios vertically, and instead of translateX() use translateY().
 
(2) my below solution adds a div <div id="bckgrnd"></div> as the last child of the container #radios div, you can add by javascript/jquery instead, to do so you can add this jquery: JS Fiddle 2-Updated
 
$(document).ready(function(){
    $('#radios').append('<div id="bckgrnd"></div>');
});
 
(3) The z-index:; value was added just to ensure that the #bckgrnd - which has z-index:-1 will not disappear behind the body or whatever element contains the #radios div. so now we can set a background image to the body and a background color to a container div without worrying about it.. Test JS Fiddle