✨ Add an animation effects for social links.
This commit is contained in:
71
static/css/a_hover.css
Normal file
71
static/css/a_hover.css
Normal file
@@ -0,0 +1,71 @@
|
||||
|
||||
@keyframes wobble-vertical {
|
||||
16.65% {
|
||||
transform: translateX(8px);
|
||||
}
|
||||
|
||||
33.3% {
|
||||
transform: translateX(-6px);
|
||||
}
|
||||
|
||||
49.95% {
|
||||
transform: translateX(4px);
|
||||
}
|
||||
|
||||
66.6% {
|
||||
transform: translateX(-2px);
|
||||
}
|
||||
|
||||
83.25% {
|
||||
transform: translateX(1px);
|
||||
}
|
||||
|
||||
100% {
|
||||
transform: translateX(0);
|
||||
}
|
||||
}
|
||||
|
||||
/* Icon Pulse */
|
||||
@-webkit-keyframes hvr-icon-pulse {
|
||||
25% {
|
||||
-webkit-transform: scale(1.3);
|
||||
transform: scale(1.3);
|
||||
}
|
||||
75% {
|
||||
-webkit-transform: scale(0.8);
|
||||
transform: scale(0.8);
|
||||
}
|
||||
}
|
||||
@keyframes hvr-icon-pulse {
|
||||
25% {
|
||||
-webkit-transform: scale(1.3);
|
||||
transform: scale(1.3);
|
||||
}
|
||||
75% {
|
||||
-webkit-transform: scale(0.8);
|
||||
transform: scale(0.8);
|
||||
}
|
||||
}
|
||||
.hvr-icon-pulse {
|
||||
display: inline-block;
|
||||
vertical-align: middle;
|
||||
-webkit-transform: perspective(1px) translateZ(0);
|
||||
transform: perspective(1px) translateZ(0);
|
||||
box-shadow: 0 0 1px rgba(0, 0, 0, 0);
|
||||
}
|
||||
.hvr-icon-pulse .hvr-icon {
|
||||
-webkit-transform: translateZ(0);
|
||||
transform: translateZ(0);
|
||||
-webkit-transition-timing-function: ease-out;
|
||||
transition-timing-function: ease-out;
|
||||
}
|
||||
.hvr-icon-pulse:hover .hvr-icon, .hvr-icon-pulse:focus .hvr-icon, .hvr-icon-pulse:active .hvr-icon {
|
||||
-webkit-animation-name: hvr-icon-pulse;
|
||||
animation-name: hvr-icon-pulse;
|
||||
-webkit-animation-duration: 1s;
|
||||
animation-duration: 1s;
|
||||
-webkit-animation-timing-function: linear;
|
||||
animation-timing-function: linear;
|
||||
-webkit-animation-iteration-count: infinite;
|
||||
animation-iteration-count: infinite;
|
||||
}
|
||||
@@ -2661,9 +2661,6 @@ ul.breadcrumb li:last-child {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
/* .footer-inner {
|
||||
padding-left: 300px;
|
||||
} */
|
||||
@media (max-width: 991px) {
|
||||
.footer-inner {
|
||||
padding-left: 0;
|
||||
Reference in New Issue
Block a user