Google material Design botones de radio animados con CSS3 puro

Vista prévia

Descripción

Un conjunto de botones de radio Cool con Cool CSS3 basado cheque y Hover animaciones inspiradas en Google nuevo < a href = "https://www.google.com/design/spec/material-design/introduction.html" target = "_ blank" rel = "noopener" > material de diseño . Creado por < a href = "https://codepen.io/jchristianhall" target = "_ blank" rel = "noopener" > jchristianhall .

Funcionamiento

Cree una entrada de radio regular dentro de un elemento Label .

<label class="radio"><input id="radio1" type="radio" name="radios" checked><span class="outer"><span class="inner"></span></span>Label 1</label>

Establezca las animaciones en el CSS.

@-webkit-keyframes
 cardEnter {
0%, 20%, 40%, 60%, 80%, 100% {
 -webkit-transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
 transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
}
 0% {
 opacity: 0;
 -webkit-transform: scale3d(0.3, 0.3, 0.3);
}
 20% {
 -webkit-transform: scale3d(1.1, 1.1, 1.1);
}
 40% {
 -webkit-transform: scale3d(0.9, 0.9, 0.9);
}
 60% {
 opacity: 1;
 -webkit-transform: scale3d(1.03, 1.03, 1.03);
}
 80% {
 -webkit-transform: scale3d(0.97, 0.97, 0.97);
}
 100% {
 opacity: 1;
 -webkit-transform: scale3d(1, 1, 1);
}
}
@keyframes
 cardEnter {
0%, 20%, 40%, 60%, 80%, 100% {
 -webkit-transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
 transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
}
 0% {
 opacity: 0;
 -webkit-transform: scale3d(0.3, 0.3, 0.3);
 transform: scale3d(0.3, 0.3, 0.3);
}
 20% {
 -webkit-transform: scale3d(1.1, 1.1, 1.1);
 transform: scale3d(1.1, 1.1, 1.1);
}
 40% {
 -webkit-transform: scale3d(0.9, 0.9, 0.9);
 transform: scale3d(0.9, 0.9, 0.9);
}
 60% {
 opacity: 1;
 -webkit-transform: scale3d(1.03, 1.03, 1.03);
 transform: scale3d(1.03, 1.03, 1.03);
}
 80% {
 -webkit-transform: scale3d(0.97, 0.97, 0.97);
 transform: scale3d(0.97, 0.97, 0.97);
}
 100% {
 opacity: 1;
 -webkit-transform: scale3d(1, 1, 1);
 transform: scale3d(1, 1, 1);
}
}

Controles individuales.

.radio {

display: inline-block;

padding-right: 20px;

font-size: 18px;

line-height: 49px;

cursor: pointer;
}

.radio:hover .inner {

-webkit-transform: scale(0.5);

-ms-transform: scale(0.5);

transform: scale(0.5);

opacity: .5;
}

.radio input {

width: 1px;

height: 1px;

opacity: 0;
}

.radio input:checked + .outer .inner {

-webkit-transform: scale(1);

-ms-transform: scale(1);

transform: scale(1);

opacity: 1;
}

.radio input:checked + .outer { border: 3px solid #f08b3b; }

.radio input:focus + .outer .inner {

-webkit-transform: scale(1);

-ms-transform: scale(1);

transform: scale(1);

opacity: 1;

background-color: #e67012;
}

.radio .outer {

width: 20px;

height: 20px;

display: block;

float: left;

margin: 10px 9px 10px 10px;

border: 3px solid #0c70b4;

border-radius: 50%;

background-color: #fff;
}

.radio .inner {

-webkit-transition: all 0.25s ease-in-out;

transition: all 0.25s ease-in-out;

width: 16px;

height: 16px;

-webkit-transform: scale(0);

-ms-transform: scale(0);

transform: scale(0);

display: block;

margin: 2px;

border-radius: 50%;

background-color: #f08b3b;

opacity: 0;
}