html - 带有标签的 CSS 开关切换转换

问题描述

我遇到了这个涉及仅 CSS 开关的代码笔。

我尝试过使用该示例，但使用了倒置的颜色，因此，白色背景 + 黑色字体等于选中，黑色背景 + 白色字体等于未选中。

但是，我似乎无法重新创建开关的作者为其颜色创建的无缝过渡动画。我已经尝试调整它以使其颜色反转，但过渡似乎从未奏效。

我认为我的问题在于 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 唯一方法可以使我的颜色进行精确切换，我也欢迎该输入。

标签： htmlcsscss-transitions

这是带有反转颜色的 orig 开关，以及一些小的修改。

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;
        }
    }
}

html - 带有标签的 CSS 开关切换转换

问题描述

解决方案

推荐阅读