Простой, но в то же время приятный эффект появления галочки при активном состоянии чекбокса.
Работает в: IE9 +, Chrome, FF
HTML
<div class="container">
<h2>
Нажми на чекбокс!
</h2>
<input type="checkbox" id="cbtest" />
<label for="cbtest" class="check-box"></label>
</div>
CSS
.container h2 {
margin-bottom: 40px;
}
/* Checkmark style starts */
@-moz-keyframes dothabottomcheck {
0% {
height: 0;
}
100% {
height: 50px;
}
}
@-webkit-keyframes dothabottomcheck {
0% {
height: 0;
}
100% {
height: 50px;
}
}
@keyframes dothabottomcheck {
0% {
height: 0;
}
100% {
height: 50px;
}
}
@keyframes dothatopcheck {
0% {
height: 0;
}
50% {
height: 0;
}
100% {
height: 120px;
}
}
@-webkit-keyframes dothatopcheck {
0% {
height: 0;
}
50% {
height: 0;
}
100% {
height: 120px;
}
}
@-moz-keyframes dothatopcheck {
0% {
height: 0;
}
50% {
height: 0;
}
100% {
height: 120px;
}
}
input[type=checkbox] {
display: none;
}
.check-box {
height: 100px;
width: 100px;
background-color: transparent;
border: 10px solid #000;
border-radius: 5px;
position: relative;
display: inline-block;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
-moz-transition: border-color ease 0.2s;
-o-transition: border-color ease 0.2s;
-webkit-transition: border-color ease 0.2s;
transition: border-color ease 0.2s;
cursor: pointer;
}
.check-box::before,
.check-box::after {
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
position: absolute;
height: 0;
width: 20px;
background-color: #34b93d;
display: inline-block;
-moz-transform-origin: left top;
-ms-transform-origin: left top;
-o-transform-origin: left top;
-webkit-transform-origin: left top;
transform-origin: left top;
border-radius: 5px;
content: ' ';
-webkit-transition: opacity ease .5;
-moz-transition: opacity ease .5;
transition: opacity ease .5;
}
.check-box::before {
top: 72px;
left: 41px;
box-shadow: 0 0 0 5px #667788;
-moz-transform: rotate(-135deg);
-ms-transform: rotate(-135deg);
-o-transform: rotate(-135deg);
-webkit-transform: rotate(-135deg);
transform: rotate(-135deg);
}
.check-box::after {
top: 37px;
left: 5px;
-moz-transform: rotate(-45deg);
-ms-transform: rotate(-45deg);
-o-transform: rotate(-45deg);
-webkit-transform: rotate(-45deg);
transform: rotate(-45deg);
}
input[type=checkbox]:checked+.check-box,
.check-box.checked {
border-color: #34b93d;
}
input[type=checkbox]:checked+.check-box::after,
.check-box.checked::after {
height: 50px;
-moz-animation: dothabottomcheck 0.2s ease 0s forwards;
-o-animation: dothabottomcheck 0.2s ease 0s forwards;
-webkit-animation: dothabottomcheck 0.2s ease 0s forwards;
animation: dothabottomcheck 0.2s ease 0s forwards;
}
input[type=checkbox]:checked+.check-box::before,
.check-box.checked::before {
height: 120px;
-moz-animation: dothatopcheck 0.4s ease 0s forwards;
-o-animation: dothatopcheck 0.4s ease 0s forwards;
-webkit-animation: dothatopcheck 0.4s ease 0s forwards;
animation: dothatopcheck 0.4s ease 0s forwards;
}
