css 我怎样才能使一个复选框在取消选中后滑回它的位置？

daolsyd0 于 2023-06-25 发布在其他

关注(0)|答案(1)|浏览(156)

我正在为一个网站制作一个复选框切换滑块，我得到了复选框滑动时，其选中，但我不知道如何使它顺利滑回原来的位置。任何帮助将不胜感激！！

#spherewishlist
{
    height:40px;
    width:70px;
    background-color:gray;
    border-radius:40px;
    display: block;
    border-color: white;
}
#circlewishlist
{
    height:36px;
    width:40px;
    background-color:white;
    border-radius:100%;
    display: block;
    box-shadow: 0px 1px 1px  #141414;
    position:relative;
margin-left:3px;
    content:url('white-circle-frame-with-shadow-free-png.png');
        appearance:none;
top:41px;
}

#circlewishlist:checked
{   animation-name:slidewish;
    animation-duration: 1s;  
    right:-24px;
}
#circlewishlist:checked + #spherewishlist
{background-color:green;}
@keyframes slidewish
{    0%{left:0px;}
    100%{left:24px;}
}

这是HTML

<div>
    <input id="circlewishlist" type="checkbox"><!-- this is the circle-->
    <div id="spherewishlist"></div><!-- this is the sphere-->
   </div>

css

来源：https://stackoverflow.com/questions/76538676/how-can-i-make-a-checkbox-slide-back-to-its-position-after-unchecking-it

1条答案

按热度按时间

vfhzx4xs1#

我个人使用transform而不是@keyframes，我发现这对于简单的动画来说更容易：

#spherewishlist {
  height: 40px;
  width: 70px;
  background-color: gray;
  border-radius: 40px;
  display: block;
  border-color: white;
}

#circlewishlist {
  height: 40px;
  width: 40px;
  background-color: white;
  border-radius: 100%;
  display: block;
  box-shadow: 0px 1px 1px #141414;
  position: relative;
  content: url('white-circle-frame-with-shadow-free-png.png');
  appearance: none;
  top: 42px;
  /* added */
  transform: none;
  transition: transform 250ms ease-in-out;
}

#circlewishlist:checked {
  /* added */
  transform: translateX(100%);
  transition: transform 250ms ease-in-out;
}

#circlewishlist:checked+#spherewishlist {
  background-color: green;
}

<div>
  <input id="circlewishlist" type="checkbox">
  <!-- this is the circle-->
  <div id="spherewishlist"></div>
  <!-- this is the sphere-->
</div>

赞(0）回复(0）举报 2023-06-25

我来回答

css 我怎样才能使一个复选框在取消选中后滑回它的位置？

1条答案

相关问题

热门标签

最新问答