Анимация с radiobutton. Смена фона по клику

218

05 января 2019, 01:10

Нужно сделать такую переключалку на чистом css, без js

Вот что у меня получилось. А как сделать чтобы кружок так же переползал и такую же смену фону как на гифке?

.wrap { 
  width: 500px; 
  height: 500px; 
  display: flex; 
  justify-content: center; 
  align-items: center; 
  overflow: hidden; 
} 
 
.check { 
  position: relative; 
} 
 
.radio { 
  position: absolute; 
  z-index: -1; 
  opacity: 0; 
  margin: 10px 0 0 7px; 
} 
 
.radio+.label { 
  position: relative; 
  padding: 0 0 0 50px; 
  cursor: pointer; 
} 
 
.radio+.label:before { 
  content: ''; 
  position: absolute; 
  top: -3px; 
  left: 0; 
  width: 35px; 
  height: 35px; 
  border: 2px solid #fff; 
  border-radius: 50%; 
  background: transparent; 
} 
 
.radio+.label:after { 
  content: ''; 
  position: absolute; 
  top: 2px; 
  left: 5px; 
  width: 29px; 
  height: 29px; 
  border-radius: 50%; 
  background: #fff; 
  opacity: 0; 
  transition: .2s; 
} 
 
.radio:checked+.label:after { 
  opacity: 1; 
} 
 
.panel { 
  position: absolute; 
  width: 0; 
  height: 500px; 
  top: -241px; 
  z-index: -1; 
  transition: width 1s; 
} 
 
.radio--1:checked~.panel { 
  background: #9A59B5; 
  width: 500px; 
  left: -175px; 
} 
 
.radio--2:checked~.panel { 
  background: #3598DB; 
  width: 500px; 
  left: -224px; 
} 
 
.radio--3:checked~.panel { 
  background: #1BBC9B; 
  width: 500px; 
  left: -274px; 
}

<!doctype html> 
<html lang="ru"> 
 
<head> 
  <meta charset="UTF-8"> 
  <title>Check</title> 
  <link rel="stylesheet" href="style.css"> 
</head> 
 
<body> 
  <div class="wrap"> 
    <div class="check"> 
      <input class="radio radio--1" id="radio1" name="change-color" checked type="radio"> 
      <label class="label" for="radio1"></label> 
      <div class="panel"></div> 
    </div> 
    <div class="check"> 
      <input class="radio radio--2" id="radio2" name="change-color" type="radio"> 
      <label class="label" for="radio2"></label> 
      <div class="panel"></div> 
    </div> 
    <div class="check"> 
      <input class="radio radio--3" id="radio3" name="change-color" type="radio"> 
      <label class="label" for="radio3"></label> 
      <div class="panel"></div> 
    </div> 
  </div> 
</body> 
 
</html>

Answer 1

Совсем неправильно к вопросу подошли. Тут у вас должен быть некий viewport, окошко, в котором нужно показать слайд соответствующей нажатому radiobutton. А сам фон из трех слайдов является единым целым. Двигать его нужно либо через transform: translate, либо через background-position.

:root { 
  --basesize: 200px; 
  --animationspeed: .3s; 
} 
 
.viewport { 
  width: var(--basesize); 
  height: var(--basesize); 
  overflow: hidden; 
  position: relative; 
} 
 
.bg { 
  width: calc(var(--basesize) * 3); 
  height: var(--basesize); 
  background-image: linear-gradient(90deg, darkorchid 33.33333333%, dodgerblue 33.33333333%, dodgerblue 66.66666666%, darkturquoise 66.66666666%); 
  transition: var(--animationspeed); 
} 
 
#first:checked~.bg { 
  transform: translateX(0); 
} 
 
#second:checked~.bg { 
  transform: translateX(calc(-1 * var(--basesize))); 
} 
 
#third:checked~.bg { 
  transform: translateX(calc(-2 * var(--basesize))); 
} 
 
.controls { 
  position: absolute; 
  left: 0; 
  top: 0; 
  width: var(--basesize); 
  height: var(--basesize); 
  display: flex; 
  z-index: 100; 
} 
 
.controls-wrapper { 
  margin: auto; 
} 
 
.controls-wrapper label { 
  display: inline-block; 
  border: 2px solid white; 
  box-sizing: border-box; 
  width: calc(var(--basesize) / 10); 
  height: calc(var(--basesize) / 10); 
  border-radius: 100%; 
} 
 
.controls-wrapper { 
  background-image: radial-gradient(circle, white 22%, rgba(0, 0, 0, 0) 22%); 
  background-repeat: no-repeat; 
  background-position: calc((-1 * var(--basesize) / 10)) -2px; 
  transition: var(--animationspeed); 
} 
 
#first:checked~.controls .controls-wrapper { 
  background-position: calc((-1 * var(--basesize) / 10)) -2px; 
} 
 
#second:checked~.controls .controls-wrapper { 
  background-position: 0 -2px; 
} 
 
#third:checked~.controls .controls-wrapper { 
  background-position: calc(var(--basesize) / 10) -2px; 
} 
 
.viewport input[type=radio] { 
  display: none; 
}

<div class="viewport"> 
  <input type="radio" name="slide" id="first" checkhed> 
  <input type="radio" name="slide" id="second"> 
  <input type="radio" name="slide" id="third"> 
  <div class="controls"> 
    <div class="controls-wrapper"> 
      <label for="first"></label><label for="second"></label><label for="third"></label> 
    </div> 
  </div> 
  <div class="bg"> 
  </div> 
</div>