Question

我碰到了this码本，涉及仅CSS开关。

我已经尝试过使用该示例，但是使用了相反的颜色，因此，白色背景+黑色字体等于选中状态，而黑色背景+白色字体等于未选中状态。

但是，我似乎无法重新创建开关作者为其颜色创建的无缝过渡动画。我尝试过tweaking it来使他的颜色反转，但是这种过渡似乎从未起作用。

我认为我的问题出在SCSS的这一部分，但是我似乎无法使其正常工作。

& + label {
  cursor: pointer;

  &:hover {
    background: black;
    color: white;
  }

  &:after {
    background-color: none;
    content: "";
    height: 100%;
    position: absolute;
    top: 0;
    transition: left 200ms cubic-bezier(0.77, 0, 0.175, 1);
    width: 100%;
    z-index: -1;
  }
}

任何帮助将不胜感激。另外，如果还有另一种CSS唯一的方法来使我的颜色正确切换，我也欢迎输入。

Answer 1

这是原色开关的原色，还有一些小的修改。

orig切换按钮没有默认背景颜色，因此页面背景会通过它显示。取而代之的是，现在将按钮包装起来以为其提供默认的背景色；更好。也可以快速将左/右类添加到按钮中，以删除中间线（即边框）。无论如何，HTML结构可以比这更干净。

https://codepen.io/anon/pen/YOXwRY

HTML：

<div class="btn_wrapper">
    <input id="toggle-on" class="toggle toggle-left" name="toggle" value="false" type="radio" checked>
    <label for="toggle-on" class="btn btn_left">Yes</label>

    <input id="toggle-off" class="toggle toggle-right" name="toggle" value="true" type="radio">
    <label for="toggle-off" class="btn btn_right">No</label>
</div>

CSS：

body,html{
    background: #efefef;
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100%;
    z-index: -1;
}

.btn_wrapper {
    background: #000000;
    color: #ffffff;
    z-index: inherit;
}

.btn{
    border: 3px solid #1a1a1a;
    display: inline-block;
    padding: 10px;
    position: relative;
    text-align: center;
    transition: background 600ms ease, color 600ms ease;
}

.btn_left {
    border-right: 0px;
}

.btn_right {
    border-left: 0px;
}

input[type="radio"].toggle {
    display: none;
    & + label{
        cursor: pointer;
        min-width: 60px;
        &:hover{
            background: none;
            color: #999999;
        }
        &:after{
            background: #ffffff;
            content: "";
            height: 100%;
            position: absolute;
            top: 0;
            transition: left 200ms cubic-bezier(0.77, 0, 0.175, 1);
            width: 100%;
            z-index: -1;
        }
    }
    &.toggle-left + label {
        border-right: 0;
        &:after{
            left: 100%
        }
    }
    &.toggle-right + label{
        margin-left: -5px;
        &:after{
            left: -100%;
        }
    }
    &:checked + label {
        cursor: default;
        color: #000000;
        transition: color 200ms;
        &:after{
            left: 0;
        }
    }
}

CSS开关切换带有标签的过渡

1 个答案: