SM - Стильные решения для вашего сайта

Анимационный переключатель: стильный чекбокс на SVG и CSS

SVG/CSS анимация чекбокса: уникальный дизайн и плавное переключение

SVG/CSS анимация чекбокса: уникальный дизайн и плавное переключение

SVG и CSS в действии: оригинальный чекбокс с анимацией

Этот проект демонстрирует, как превратить обычный чекбокс в стильный и функциональный элемент интерфейса. Используя SVG, CSS и jаvascript, разработчик создал уникальный переключатель, который оживает при каждом клике.

Особенность чекбокса — это его необычная форма и плавные анимации, которые добавляют интерфейсу визуальной привлекательности. Когда пользователь переключает чекбокс, его части плавно движутся, создавая эффект интерактивности и завершённости.

Проект прекрасно подойдёт для тех, кто хочет украсить интерфейс своего сайта или изучить возможности работы с анимацией на базе SVG и CSS.

Особенности проекта:

  • Необычная форма чекбокса.
  • Анимации при переключении с использованием CSS.
  • SVG-графика для создания интерактивного интерфейса.
  • Дополнительная логика на jаvascript.

See the Pen SVG / CSS animation - checkbox by Anton Rikhnovets (@rikhnovets) on CodePen.

        
HTML
 
<div class='checkbox'>
  <label class='checkbox__container'>
    <input class='checkbox__toggle' type='checkbox'>
    <span class='checkbox__checker anim'></span>
    <svg class='checkbox__path' id='checkbox__path' space='preserve' version='1.1' viewbox='0 0 248.868 99.876'>
      <path class='path path--top' d='M194.27,59.599l42.438-42.028
c-9.086-10.419-22.443-17.006-37.215-17.006c-35.529,0-46.643,27.712-75.047,27.712s-38-27.712-75.072-27.712
c-13.45,0-25.621,5.355-34.514,14.045l48.098,48.113'></path>
      <path class='path path--bottom' d='M183.561,48.822l42.521,42.794
c-7.649,4.874-16.759,7.697-26.589,7.697c-34.914,0-46.643-30.202-75.06-30.202s-35.527,30.202-75.06,30.202
c-13.431,0-25.502-5.255-34.346-13.8l47.93-48.18'></path>
    </svg>
    <svg class='checkbox__bg' id='checkbox__bg' space='preserve' version='1.1' viewbox='0 0 248.868 99.876'>
      <path class='shape-bg' d='M199.493,99.087c27.504,0,49.374-22.106,49.374-49.374S226.552,0.338,199.493,0.338c-35.529,0-46.643,27.712-75.047,27.712
s-38-27.712-75.072-27.712C22.048,0.338,0,22.444,0,49.713s21.826,49.374,49.374,49.374c39.533,0,46.643-30.202,75.06-30.202
S164.58,99.087,199.493,99.087z'></path>
    </svg>
  </label>
</div>


        
CSS
body {
  background-color: #eee;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100vh;
}
 
h1 {
  text-align: center;
  font-size: 20px;
  text-transform: uppercase;
  letter-spacing: 1.2px;
}
 
h2 {
  text-align: center;
  font-size: 14px;
  text-transform: uppercase;
  letter-spacing: 1.2px;
}
 
hr {
  margin: 0 auto;
  margin-top: 50px;
  margin-bottom: 50px;
}
 
footer {
  text-align: center;
  padding-bottom: 50px;
}
 
.link {
  text-align: center;
  color: #278fb2;
}
 
.checkbox {
  width: 200px;
  margin: 0 auto;
}
.checkbox__container {
  display: block;
  position: relative;
  height: 82px;
}
.checkbox__toggle {
  display: none;
}
.checkbox__toggle:checked ~ .checkbox__path .path--top {
  stroke-dashoffset: 0px;
  stroke: #0cb018;
}
.checkbox__toggle:checked ~ .checkbox__path .path--bottom {
  stroke-dasharray: 14px 360px;
  stroke-dashoffset: 0px;
  stroke: #0cb018;
}
.checkbox__checker {
  position: absolute;
  top: 4px;
  left: 4px;
  z-index: 1;
  display: block;
  width: 73px;
  height: 73px;
  background-color: #fff;
  border-radius: 50%;
  z-index: 9;
}
.checkbox__bg, .checkbox__path {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
.checkbox__bg .shape-bg {
  fill: #aaa;
}
.checkbox__path {
  z-index: 9;
}
.checkbox__path .shape-bg {
  fill: #fff;
  stroke-width: 1px;
  stroke: #aaa;
}
.checkbox__path .path {
  stroke-width: 4px;
  stroke: #bf1e1e;
  fill: none;
  stroke-linecap: round;
  transition: 1s;
}
.checkbox__path .path--top {
  stroke-dasharray: 33px 360px;
  stroke-dashoffset: -336px;
}
.checkbox__path .path--bottom {
  stroke-dasharray: 33px 360px;
  stroke-dashoffset: -324px;
}
.checkbox #checkbox__circle {
  z-index: 9;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  fill: #fff;
}
 
.anim {
  transition-timing-function: cubic-bezier(0.385, -0.6, 0.685, 1.59);
  transition-duration: 0.2s;
}
 
.anim--go-right {
  left: calc(100% - 76px);
}
 
.anim--speed {
  -webkit-animation-duration: 0.5s;
          animation-duration: 0.5s;
  -webkit-animation-name: speedSmall;
          animation-name: speedSmall;
}
 
@-webkit-keyframes speed {
  0% {
    transform: scaleY(0.6);
  }
  30% {
    transform: scaleY(2.3);
  }
  60% {
    transform: scaleY(2.3);
  }
  100% {
    transform: scaleY(0.6);
  }
}
 
@keyframes speed {
  0% {
    transform: scaleY(0.6);
  }
  30% {
    transform: scaleY(2.3);
  }
  60% {
    transform: scaleY(2.3);
  }
  100% {
    transform: scaleY(0.6);
  }
}
@-webkit-keyframes speedSmall {
  0% {
    transform: scale(1, 1);
  }
  25% {
    transform: scale(0.7, 0.7);
  }
  35% {
    transform: scale(0.7, 0.7);
  }
  50% {
    transform: scale(0.7, 0.3);
  }
  65% {
    transform: scale(0.7, 0.7);
  }
  75% {
    transform: scale(0.7, 0.7);
  }
  100% {
    transform: scale(1, 1);
  }
}
@keyframes speedSmall {
  0% {
    transform: scale(1, 1);
  }
  25% {
    transform: scale(0.7, 0.7);
  }
  35% {
    transform: scale(0.7, 0.7);
  }
  50% {
    transform: scale(0.7, 0.3);
  }
  65% {
    transform: scale(0.7, 0.7);
  }
  75% {
    transform: scale(0.7, 0.7);
  }
  100% {
    transform: scale(1, 1);
  }
}
        
JS
/*
*/
 
var toggler = $('.checkbox__toggle');
var circle = $('.checkbox__checker');
 
var time1 = 150;
var time2 = 800;
 
toggler.click(function(){
  circle.removeClass('anim--speed');
  if($(this).is(":checked")){
    setTimeout(function(){
      circle.addClass('anim--speed');
    },10);
    setTimeout(function(){
      circle.addClass('anim--go-right');
    },time1);
  }
  else{
    setTimeout(function(){
      circle.addClass('anim--speed');
    },10);
    setTimeout(function(){
      circle.removeClass('anim--go-right');
    },time1);
  }
})

svg-css-animationcheckbox.zip
0 13.12 Kb
Нашли ошибку? Сообщите нам, мы исправим!
0 лайков 13 просмотров
Комментариев нет
Чтобы оставить комментарий, необходимо на сайте.
Копирование запрещено!

Сайт SATAMAX.RU