Social Icons vision 3D HTML y CSS

Social Icons vision 3D HTML y CSS | Icono/botón social con efecto 3D solo con Css

By Miguel Cast

HTML

<div class="flex-center"> <div class="flex-center"> <i class="fa fa-instagram fa-4x icon-3d"></i> <i class="fa fa-twitter fa-4x icon-3d"></i> <i class="fa fa-facebook fa-4x icon-3d"></i> <i class="fa fa-youtube fa-4x icon-3d"></i></div>


CSS

.flex-center{width:100%;height:100vh;background:#000;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-pack:center;-webkit-justify-content:center;-ms-flex-pack:center;justify-content:center;-webkit-box-align:center;-webkit-align-items:center;-ms-flex-align:center;align-items:center}
.icon-3d{padding:10px;-webkit-animation:icon3d 200ms 10;animation:icon3d 200ms 10;color:#fff}
.icon-3d:hover{-webkit-animation:icon3d 200ms infinite;animation:icon3d 200ms infinite}
@keyframes icon3d{0%{text-shadow:5px 4px #f44336,-5px -6px #2196f3}
25%{text-shadow:-5px -6px #f44336,5px 4px #2196f3}
50%{text-shadow:5px -4px #f44336,-8px 4px #2196f3}
75%{text-shadow:-8px -4px #f44336,-5px -4px #2196f3}
100%{text-shadow:-5px 0 #f44336,5px -4px #2196f3}}
¿Te gusto el post?
¡Compártelo!

Adblock Detectado

Apoya este sitio desactivando el Adblock para seguir navegando. ¡Gracias!

¡Ya Desactive el Adblock!