Casilla animada & botón de opción con CSS3 y Font awesome

Vista prévia

Descripción

Una casilla animada fresca y un reemplazo de botón de radio que se estilo con Font awesome y animado con las transformaciones y fotogramas clave CSS3. Creado por < a href = "https://codepen.io/allusis" target = "_ blank" rel = "noopener" > Allusis .

Funcionamiento

Incluya el Font awesome 4 requerido en su documento.

<link href="https://netdna.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css" rel="stylesheet">

Agregue varias casillas de verificación y botones de radio en el documento.

<label for="check-one">

<input type="checkbox" name="check-one" id="check-one" value="checkone"/>

<i></i> <span>Check One</span>
 </label>


<label for="check-two">

<input type="checkbox" name="check-two" id="check-two" value="check-two"/>

<i></i> <span>Check Two</span>
</label>


<label for="check-three">

<input type="checkbox" name="check-three" id="check-three" value="check-three"/>

<i></i> <span>Check Three</span>
</label>


<label for="radio-one">

<input type="radio" name="exampleRadios" id="radio-one" value="radio-one"/>

<i></i> <span>Radio One</span>
 </label>

<label for="radio-two">

<input type="radio" name="exampleRadios" id="radio-two" value="doggie"/>

<i></i> <span>Radio Two</span>
 </label>

Las reglas CSS/CSS3 requeridas para estilo & animar las casillas de verificación y los botones de radio.

::-moz-selection {
 background: white;
}

::selection { background: white; }

@-webkit-keyframes
 icon-beat {
0% {
 -webkit-transform: scale(2);
 -ms-transform: scale(2);
 transform: scale(2);
}
 100% {
 -webkit-transform: scale(1);
 -ms-transform: scale(1);
 transform: scale(1);
}
}

@keyframes
 icon-beat {
0% {
 -webkit-transform: scale(2);
 -ms-transform: scale(2);
 transform: scale(2);
}
 100% {
 -webkit-transform: scale(1);
 -ms-transform: scale(1);
 transform: scale(1);
}
}

* {

-webkit-box-sizing: content-box;

-moz-box-sizing: content-box;

box-sizing: content-box;
}

label {

display: block;

position: relative;

padding: 0.5rem 1rem;

line-height: 28px;

font-weight: normal;

cursor: pointer;

-webkit-tap-highlight-color: transparent;
}

label:last-of-type { margin-right: 1rem; }

label i {

display: inline-block;

height: 25px;

position: relative;

top: 6px;

font-style: normal;

color: #ccc;
}

label span {

display: inline-block;

margin-left: 5px;

line-height: 25px;

color: gray;
}

input[type="radio"],
input[type="checkbox"] { display: none; }

input[type="radio"] + i:before,
input[type="checkbox"] + i:before {

font-family: 'FontAwesome';

font-size: 28px;

height: 25px;

width: 25px;

display: inline-block;
}

input[type="radio"]:checked + i,
input[type="checkbox"]:checked + i {

position: relative;

-webkit-animation: icon-beat 0.1s ease;

animation: icon-beat 0.1s ease;
}

input[type="radio"]:checked + i + span,
input[type="checkbox"]:checked + i + span {

-webkit-transition: all 0.1s ease;

transition: all 0.1s ease;
}

input[type="radio"] + i:before { content: "\f10c"; }

input[type="radio"]:checked + i:before { content: "\f111"; }

input[type="radio"]:checked + i + span,
input[type="radio"]:checked + i:before { color: rgba(0, 128, 128, 0.5); }

input[type="checkbox"] + i:before { content: "\f096"; }

input[type="checkbox"]:checked + i:before { content: "\f046"; }

input[type="checkbox"]:checked + i + span,
input[type="checkbox"]:checked + i:before { color: rgba(0, 128, 0, 0.5); }