Тумблер | #cpc-on-off #codepenchallenge - пример html js css

• HTML код


• CSS код
• JS код
• Результат кода

<div class="radio-checked">

  <div class="radio-checked_highlight"></div>

  <div class="radio-checked_container">

    <input checked="checked" class="radio-checked_input" id="on" name="status" type="radio" value="on" /><label class="radio-checked_label radio-checked_label--on" for="on"> On</label><input class="radio-checked_input" id="off" name="status" type="radio" value="off" /><label class="radio-checked_label radio-checked_label--off" for="off">Off</label>

  </div>

</div>

@import url("https://fonts.googleapis.com/css2?family=Comfortaa:wght@600&display=swap");

:root {

  --highlight-left: 0;

  --pagination-width: 0;

}



html {

  height: 100%;

}



body {

  font-family: sans-serif;

  height: 100%;

  margin: 0;

  font-family: "Comfortaa", cursive;

  background-color: #eef3f7;

  user-select: none;

  display: flex;

  align-items: center;

  justify-content: center;

}



.radio-checked {

  position: relative;

  font-size: 34px;

  letter-spacing: 1px;

  box-shadow: -6px -5px 14px 3px #fff, 7px 7px 12px 2px #d0d8e3;

  border-radius: 70px;

}

.radio-checked_input {

  display: none;

}

.radio-checked_input:checked + .radio-checked_label--on {

  color: #47cf73;

  text-shadow: 0 0 7px rgba(71, 207, 115, 0.6);

}

.radio-checked_input:checked + .radio-checked_label--off {

  color: #ff3c41;

  text-shadow: 0 0 7px rgba(255, 60, 65, 0.6);

}

.radio-checked_input:checked + .radio-checked_label:before {

  display: none;

}

.radio-checked_label {

  cursor: pointer;

  display: inline-block;

  padding: 20px 25px 15px;

  line-height: 1;

  border-radius: 3rem;

  color: #acb2c0;

  transition: all 150ms ease-in-out;

}

.radio-checked_label:before {

  content: "";

  position: absolute;

  left: 0;

  top: 0;

  right: 0;

  bottom: 0;

  display: block;

}

.radio-checked_container {

  position: relative;

}

.radio-checked_highlight {

  position: absolute;

  left: 0;

  bottom: 0;

  width: var(--pagination-width);

  height: 100%;

  border-radius: 70px;

  box-shadow: inset -5px -5px 10px 4px #fff, inset -2px 6px 8px 6px #d0d8e3;

  background: #eef3f7;

  transition: all 0.6s ease;

  transform: translateX(var(--highlight-left));

}



.svg {

  position: absolute;

  top: -50%;

  bottom: -50%;

  pointer-events: none;

}

.svg_icon {

  width: auto;

  height: 100%;

}

.svg--right {

  left: 100%;

}

.svg--left {

  right: 100%;

}

//#cpc-on-off #codepenchallenge

let root = document.documentElement;

let color = ["#47cf73", "#7f71fe", "#1A3AF8", "#47cf73"];

var animateDur = "1.4s";



window.onload = function () {

  let activeChecked = document.querySelector(

  ".radio-checked_input:checked + .radio-checked_label");



  let left = activeChecked.offsetLeft;

  let width = activeChecked.offsetWidth;

  animation(left, width);

};



document.

querySelectorAll(".radio-checked_label").

forEach(t => t.addEventListener("click", onChecked));



function onChecked(e) {

  let left = e.target.offsetLeft;

  let width = e.target.offsetWidth;

  animation(left, width);

}

var bool = true;

function animation(left, width) {

  root.style.setProperty("--pagination-width", width + "px");

  root.style.setProperty("--highlight-left", left + "px");

  (bool = !bool) ? svgCreate("right") : svgCreate("left");

}



function svgCreate(position) {

  let svgLeft =

  `

























		

		   
  color[Math.floor(Math.random() * 4)] +

  `>

		 
  animateDur +

  ` repeatCount="1">        
  color[Math.floor(Math.random() * 4)] +

  `>  
  animateDur +

  ` repeatCount="1">     

		    
  color[Math.floor(Math.random() * 4)] +

  `>  
  animateDur +

  ` repeatCount="1">     

		    
  color[Math.floor(Math.random() * 4) + 1] +

  `>  
  animateDur +

  ` repeatCount="1">     

		`;

  let svgRight =

  `

























		

		   

		 
  animateDur +

  ` repeatCount="1">     

		

		     
  animateDur +

  ` repeatCount="1">     

		     
  animateDur +

  ` repeatCount="1">     

		`;



  let span = document.createElement("span");

  let radioChecked = document.querySelector(".radio-checked");

  span.className = "svg svg--" + position;

  if (position === "left") {

    span.innerHTML = svgLeft;

  } else {

    span.innerHTML = svgRight;

  }



  setTimeout(function () {

    radioChecked.appendChild(span);

  }, 400);

  setTimeout(function () {

    span.remove();

  }, 1500);

}

//# sourceURL=pen.js