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

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.028c-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.712c-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.794c-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.202c-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.712s-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.202S164.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
/*original: https://codepen.io/orion_Lord_of_the_world/pen/jOYLRLZ</span>*/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
Нашли ошибку? Сообщите нам, мы исправим!
Комментариев нет
Чтобы оставить комментарий, необходимо на сайте.
Копирование запрещено!