Разработка - Креативная реализация чекбоксов

Создаем разметку HTML:

HTML:

<form>
    <label><input class="cb pristine" type="checkbox"> <span>Check me</span></label>
    <label><input class="cb pristine" type="checkbox"> <span>Check me, too</span></label>
    <label><input class="cb pristine" type="checkbox"> <span>And check me</span></label>
</form>

Создаем стиль:

CSS:

*, *:before, *:after {
  border: 0;
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

:root {
  font-size: 30px;
}

body, input {
  font: 1em "Titillium Web", sans-serif;
  line-height: 1.5;
}

body {
  background: url("https://s22.postimg.cc/gzyyouldd/grey-paper-texture.jpg") center;
  height: 100vh;
  overflow: hidden;
}

form {
  margin: 1.5em auto 0;
  padding: 0.75em;
  max-width: 320px;
}

label {
  display: block;
  margin-bottom: 1.5em;
  -webkit-tap-highlight-color: transparent;
}

.cb {
  box-shadow: 0 0 0 0.125em rgba(0, 0, 0, 0.75) inset;
  display: inline-block;
  position: relative;
  width: 1.5em;
  height: 1.5em;
  vertical-align: middle;
  -moz-appearance: none;
  -webkit-appearance: none;
}
.cb:before, .cb:after {
  content: "";
  display: block;
  position: absolute;
}
.cb:before {
  animation: eraseA 0.5s steps(1) forwards;
  background: url("https://s22.postimg.cc/fi4blx4gx/checkmark.png") 0 100%/1.2em 1.35em no-repeat;
  bottom: 0.2em;
  left: 0.3em;
  width: 0;
  height: 1.35em;
}
.cb:after {
  animation: eraseB 0.5s linear forwards;
  background: linear-gradient(rgba(255, 255, 255, 0.2) 50%, rgba(255, 255, 255, 0) 50%) 11.2em 0, linear-gradient(#c8646e, #c8646e) 11.2em 0, linear-gradient(90deg, rgba(255, 255, 255, 0.6), rgba(255, 255, 255, 0.6) 0.1em, rgba(255, 255, 255, 0) 0.1em, rgba(255, 255, 255, 0) 0.2em, rgba(0, 0, 0, 0.2) 0.2em, rgba(0, 0, 0, 0.2) 0.3em, rgba(0, 0, 0, 0) 0.3em) 9.8em 0/0.3em 100%, repeating-linear-gradient(rgba(255, 255, 255, 0.6), rgba(255, 255, 255, 0.6) 0.1em, rgba(255, 255, 255, 0) 0.1em, rgba(255, 255, 255, 0) 0.2em) 10.2em 0/0.5em 100%, linear-gradient(90deg, rgba(255, 255, 255, 0.6), rgba(255, 255, 255, 0.6) 0.1em, rgba(255, 255, 255, 0) 0.1em, rgba(255, 255, 255, 0) 0.2em, rgba(0, 0, 0, 0.2) 0.2em, rgba(0, 0, 0, 0.2) 0.3em, rgba(0, 0, 0, 0) 0.3em) 10.8em 0/0.3em 100%, linear-gradient(rgba(255, 255, 255, 0) 35%, rgba(255, 255, 255, 0.6) 35%, rgba(255, 255, 255, 0.6) 65%, rgba(255, 255, 255, 0) 65%) 9.7em 0, linear-gradient(#b4b4b4, #b4b4b4) 9.7em 0, linear-gradient(rgba(0, 0, 0, 0.1) 27%, rgba(0, 0, 0, 0) 27%, rgba(0, 0, 0, 0) 73%, rgba(0, 0, 0, 0.2) 73%) 2em 0, linear-gradient(#f0d000, #f0d000) 2em 0, linear-gradient(-14deg, #1e1e1e 18%, rgba(30, 30, 30, 0) 20%) 0 0/0.5em 0.5em, linear-gradient(14deg, rgba(30, 30, 30, 0) 80%, #1e1e1e 83%) 0 0.5em/0.5em 0.5em, linear-gradient(-14deg, #d2a078 48%, rgba(210, 160, 120, 0) 50%) 0 0/2em 0.5em, linear-gradient(14deg, rgba(0, 0, 0, 0) 48%, rgba(0, 0, 0, 0.1) 50%) 0 0.5em/2em 0.5em, linear-gradient(14deg, rgba(210, 160, 120, 0) 48%, #d2a078 50%) 0 0.5em/2em 0.5em;
  background-repeat: no-repeat;
  border-radius: 0 0.1em 0.1em 0;
  opacity: 0;
  visibility: hidden;
  transform-origin: 0 0.25em;
  width: 12em;
  height: 1em;
}
.cb:checked {
  background-color: transparent;
}
.cb:checked:before {
  animation: drawA 0.5s linear forwards;
}
.cb:checked:after {
  animation: drawB 0.5s linear;
}
.cb:focus {
  outline: transparent;
}
.cb:focus + span {
  color: rgba(0, 0, 0, 0.75);
  outline: transparent;
}

.pristine:before, .pristine:after {
  animation: none;
}

@keyframes drawA {
  from, 5% {
    width: 0;
    height: 1.35em;
  }
  90%, to {
    width: 1.2em;
    height: 1.35em;
  }
}
@keyframes drawB {
  from {
    opacity: 0;
    transform: translate(0em, -0.5em) rotate(-50deg);
    visibility: visible;
  }
  5% {
    opacity: 1;
    transform: translate(0em, 0.3em) rotate(-60deg);
  }
  17% {
    transform: translate(0.25em, 0.8em) rotate(-65deg);
  }
  79% {
    transform: translate(1.1em, -0.14em) rotate(-63deg);
  }
  90% {
    opacity: 1;
    transform: translate(1.2em, -0.15em) rotate(-63deg);
  }
  to {
    opacity: 0;
    transform: translate(1.25em, -1.7em) rotate(-63deg);
  }
}
@keyframes eraseA {
  from {
    width: 1.2em;
    height: 1.35em;
  }
  10% {
    width: 1.2em;
    height: 1.08em;
  }
  27% {
    width: 1.2em;
    height: 0.81em;
  }
  36% {
    width: 1.2em;
    height: 0.7em;
  }
  45% {
    width: 1.2em;
    height: 0.55em;
  }
  55% {
    width: 1.2em;
    height: 0.35em;
  }
  80%, to {
    width: 1.2em;
    height: 0;
  }
}
@keyframes eraseB {
  from {
    opacity: 0;
    transform: translate(0.6em, -12.2em) rotate(90deg);
    visibility: visible;
  }
  10% {
    opacity: 1;
    transform: translate(1.2em, -12.05em) rotate(90deg);
  }
  20% {
    transform: translate(0.6em, -11.9em) rotate(90deg);
  }
  30% {
    transform: translate(1.2em, -11.75em) rotate(90deg);
  }
  40% {
    transform: translate(0.6em, -11.6em) rotate(90deg);
  }
  50% {
    transform: translate(1.2em, -11.45em) rotate(90deg);
  }
  60% {
    transform: translate(0.6em, -11.3em) rotate(90deg);
  }
  70% {
    transform: translate(1.2em, -11.15em) rotate(90deg);
  }
  80% {
    transform: translate(0.6em, -11em) rotate(90deg);
  }
  90% {
    opacity: 1;
    transform: translate(2em, -12.5em) rotate(100deg);
  }
  to {
    opacity: 0;
    transform: translate(2em, -12.5em) rotate(100deg);
  }
}

Пишем jquery:

JavaScript:

document.addEventListener("DOMContentLoaded",function() {
    var q = document.querySelectorAll(".cb");
    for (var i in q) {
        if (+i < q.length) {
            q[i].addEventListener("click",function(){
                let c = this.classList,
                    p = "pristine";
                if (c.contains(p)) {
                    c.remove(p);
                }
            });
        }
    }
});

Смотрим результат:

Разработка Креативная реализация чекбоксов

Ещё ресурсы от baltun