Question

我使用纯css Check it out创建了一个切换切换复选框。

现在我想通过一些过渡动画它 - （左右背景滑动，就像它here一样）。但我真的不确定如何（我链接的示例使用不同的HTML，我不打算改变我的。）

我试着这样做：

@keyframes goleft {
  0%   { margin-right: 10px; text-indent: 10px; }
  50%  { margin-right: 22px; text-indent: 22px; }
  100% { margin-right: 35px; text-indent: 35px; }
}

// later: 
transition: goleft 1s infinite;

35px是整个盒子宽度的一半，我认为背景会移动但是文本会停留，而我会为另一个方向制作另一个动画。但它没有用。

我很擅长使用css3制作动画\过渡，有什么建议吗？

p.s。如上所述，我不想在那里更改我的HTML，而且我不想使用javascript

Answer 1

FIXED DEMO

我在代码中添加了一些变化： - 我将文本移动到跨度，并使用before元素作为过渡移动的背景。

you can see the fixed demo

label{
    position:relative;    
}

.switchbox input + label:before {
    transition:0.3s;
    content:""; display:block;
    width:50%;
    height:20px;
    position:absolute;
    left:0;
    top:0;
  background: #a5a5a5; /* W3C */    
}

.switchbox input:checked + label:before {
    left:50%; 
}

css切换开关 - 在伪元素之间添加背景颜色的过渡

1 个答案: