Tutoriaes blogger | efectos "hover" con animaciones para nuestros enlaces

Tutorial Blogger #19

¡Que tal Lectores!!
Como prometí esta seria la parte 2 del tutorial anterior (Parte 1)Así que, ¿Cuál es la diferencia?  Que en este tutorial el código que te estoy compartiendo afectara todos tus enlaces que tengas en tu blog, a diferencia del tutorial anterior que solo afecta el enlace que añades en HTML, ósea solo lo que tu decides que tenga dicho efecto. 📌 Ejemplo: Texto de Ejemplo
◈ ━━━━━━━ •◦⚜◦• ━━━━━━ ◈1. De izquierda a derecha
a { position: relative; overflow: hidden; display: inline-block; text-decoration: none; color: #333; } a:after { content: ""; position: absolute; bottom: 0; left: -100%; width: 100%; height: 2px; background: #333; transition: left .8s; } a:hover:after { left: 0; }
◈ ━━━━━━━ •◦⚜◦• ━━━━━━ ◈2. De derecha a izquierda
a { position: relative; overflow: hidden; display: inline-block; text-decoration: none; color: #333; } a:after { content: ""; position: absolute; bottom: 0; right: -100%; width: 100%; height: 2px; background: #333; transition: right .8s; } a:hover:after { right: 0; }
◈ ━━━━━━━ •◦⚜◦• ━━━━━━ ◈3. Arriba y abajo opuestos
a { position: relative; overflow: hidden; display: inline-block; text-decoration: none; color: #333; } a:before, a:after { content: ""; position: absolute; top: 0; left: -100%; width: 100%; height: 2px; background: #333; transition: left .8s; } a:hover:before { left: 0; } a:after { top: auto; bottom: 0; left: auto; right: -100%; background: #333; transition: right .8s; } a:hover:after { right: 0; }
◈ ━━━━━━━ •◦⚜◦• ━━━━━━ ◈4. Del centro a los lados
a { display: inline-block; position: relative; color: #333; text-decoration: none; } a:after { content: ""; display: block; margin: auto; height: 2px; width: 0px; transition: all .8s; } a:hover:after { width: 100%; background: #333; }
◈ ━━━━━━━ •◦⚜◦• ━━━━━━ ◈5. Doble del centro a los lados
a { display: inline-block; position: relative; color: #333; text-decoration: none; } a:before, a:after { content: ""; display: block; margin: auto; height: 2px; width: 0px; background: #333; transition: all .8s; } a:hover:before, a:hover:after { width: 100%; }
◈ ━━━━━━━ •◦⚜◦• ━━━━━━ ◈6. Borde completo
a { display: inline-block; position: relative; color: #333; text-decoration: none; padding: 0 4px; } a:before, a:after { content: ""; width: 100%; height: 100%; position: absolute; top: 0; left: 0; box-sizing: border-box; transform: scale(0); transition: 0.5s; } a:before { border-bottom: 2px solid #333; border-left: 2px solid #333; transform-origin: 0 100%; } a:after { border-top: 2px solid #333; border-right: 2px solid #333; transform-origin: 100% 0%; } a:hover:after, a:hover:before { transform: scale(1); }
◈ ━━━━━━━ •◦⚜◦• ━━━━━━ ◈7. Borde completo 2
a { display: inline-block; overflow: hidden; position: relative; color: #333; text-decoration: none; padding: 0 4px; } a:before, a:after { content: ""; width: 100%; height: 2px; position: absolute; box-sizing: border-box; transform: scale(0); } a:before { transform: translateX(100%); bottom: 0; left: 0; height: 2px; border-bottom: 2px solid transparent; border-left: 2px solid transparent; transition: .1s transform linear, .1s height linear .1s; } a:after { transform: translateX(-100%); top: 0; left: 0; height: 2px; border-top: 2px solid transparent; border-right: 2px solid transparent; transition: .1s transform linear .2s, .1s height linear .3s; } a:hover:after, a:hover:before { transform: translateX(0); height: 100%; border-color: #333; }
◈ ━━━━━━━ •◦⚜◦• ━━━━━━ ◈8. Animación de fondo
a { position: relative; text-decoration: none; color: #333; z-index: 1; } a:before { content: ""; background: #ccc; position: absolute; width: 100%; height: 2px; bottom: 0; left: 0; transform: scaleX(0); animation: .8s no-hover; animation-fill-mode: forwards; z-index: -1; } a:hover:before, a:focus:before { animation: .4s hover linear; animation-fill-mode: forwards; } @keyframes hover { 0% {transform: scaleX(0);height: 5px;} 45% {transform: scaleX(1.05);height: 5px;} 55% {height: 5px;} 100% {transform: scaleX(1.05);height: 100%;} } @keyframes no-hover { 0% {transform: scaleX(1.05);height: 100%;} 45% {height: 5px;} 55% {transform: scaleX(1.05);height: 5px;opacity: 1;} 100% {transform: scaleX(0);height: 5px;opacity: .02;} }
◈ ━━━━━━━ •◦⚜◦• ━━━━━━ ◈9. Efecto 3D
a { display: inline-block; position: relative; color: #333; text-decoration: none; transition: all .5s ease; transform-style: preserve-3d; } a:after { content: "Enlace"; position: absolute; top: -100%; left: 0px; width: 100%; background: #ccc; transform-origin: left bottom; transform: rotateX(90deg); } a:hover { transform-origin: center bottom; transform: rotateX(-90deg) translateY(100%); }
📌En esta ocasión no hay que modificar nada dentro del código, ya una vez escogido el efecto y pegado el CSS este mismo afectara a todos los enlaces dentro del blog.
Después de navegar y analizar algunos códigos los siguientes enlaces me fueron de un millón de ayuda. 🔗 Enlaces externos:• Olorablogger
• Codepen
◈ ━━━━━━━ •◦⚜◦• ━━━━━━ ◈

Esto seria todo.Muchas Gracias por leer me, No olviden: comentar, seguir el blog y compartir!!Besitos¡¡Kc...
¿Te gusta lo que hago? Me ayudas

í