css 中的点击背景颜色过渡

Question

在这里，我尝试为单选按钮添加带有幻灯片过渡的背景色。在活动背景色上随幻灯片过渡移动。我尝试使用 transform: translate(); 但它不起作用。而且我不想更改 HTML。谁能告诉我如何实现。

/** Case Switch Button **/

.case-switch-wrap h3 {
  font-family: "Lato", Sans-serif;
  font-size: 14px;
  font-weight: 400;
  line-height: 26px;
  letter-spacing: 0.5px;
  color: #000000;
}

.case-switch {
  position: relative;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  /*   height: 38px; */
  width: 130px;
  background: #e6e6e6;
  border-radius: 3px;
  -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0%), 0 1px rgba(255, 255, 255, 10%);
}

.switch-label {
  padding-left: 65px;
  position: relative;
  z-index: 999999999;
}

.switch-label input {
  position: absolute;
  opacity: 0;
  cursor: pointer;
}

.switch-label .checkmark {
  position: absolute;
  top: 0;
  left: 0;
  height: 40px;
  width: 65px;
  background: #e6e6e6;
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 4px;
}

.switch-label input:checked~.checkmark {
  background: #39ccae;
  color: #fff;
}

.switch-label input:checked~.text {
  font-weight: bold;
}

<div class="case-switch">

  <label class="switch-label switch-label-on">
    <input type="radio" class="switch-input" name="switch-toggle" data-ref="on" checked>
    <span class="checkmark">On</span>
    </label>

  <label class="switch-label switch-label-off">
    <input type="radio" class="switch-input" name="switch-toggle" data-ref="off">
      <span class="checkmark">Off</span>
    </label>
</div>

Answer 1

解决办法是用::after新建一个可以前后滑动的元素。我在 switch-label-off 之后创建它并使用 translateX 来回移动它。我将容器 case-switch 调整为具有背景和边框，并删除了导致错位的规则。我还将 switch-label-off 的 z-index 调整到 switch-label-on 下面。其余的新规则在 css.

的底部

/** Case Switch Button **/

.case-switch-wrap h3 {
  font-family: "Lato", Sans-serif;
  font-size: 14px;
  font-weight: 400;
  line-height: 26px;
  letter-spacing: 0.5px;
  color: #000000;
}

.case-switch {
  position: relative;
  /*display: -webkit-box;
  display: -ms-flexbox;
  display: flex;*/
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: start;
  height: 40px;
  width: 130px;
  background: #f0f0f0;
    border : 1px solid #e6e6e6;
  border-radius: 3px;
  -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0%), 0 1px rgba(255, 255, 255, 10%);
}

.switch-label {
  padding-left: 65px;
  position: relative;
  z-index: 999;
}


.switch-label input {
  position: absolute;
  opacity: 0;
  cursor: pointer;
}

.switch-label .checkmark {
  position: absolute;
  top: 0;
  left: 0;
  height: 40px;
  width: 65px;
  background: transparent /* set to transparent */;
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 4px;
}


.switch-label input:checked~.checkmark {
  color: #fff;
}
 
/* set this one to be below the other in z-index */
.switch-label.switch-label-off {
  z-index: 998;
}
/* transition on checkmark color with tiny delay */
.switch-label .checkmark {
  transition: color .3s linear .05s;
}

/* new element to use as our slider */
.switch-label.switch-label-off .checkmark::after {
  content: " ";
  position: absolute;
  top: 0;
  z-index: -100;
  left: 0;
  height: 40px;
  width: 65px;
  background: #39ccae;
  text-align: center;
  border-radius: 4px;
  transform: translateX(-66px);
  transition: transform .3s ease-in-out;
}

.switch-label input:checked~.checkmark::after {
  transform: translateX(0px);
}

.switch-label input:checked~.text {
  font-weight: bold;
}

<div class="case-switch">
  <label class="switch-label switch-label-on">
    <input type="radio" class="switch-input" name="switch-toggle" data-ref="on" checked>
    <span class="checkmark">On</span>
    </label>
  <label class="switch-label switch-label-off">
    <input type="radio" class="switch-input" name="switch-toggle" data-ref="off">
      <span class="checkmark">Off</span>
    </label>
</div>

css 中的点击背景颜色过渡

Onclick background color transition in css

javascript

html

css

css-transitions