the icon alb element got the custom-class: move
with redifined sonarEffect to a bit of currentColor
now with sonarEffect by setting overflow value to visible
/*** custom-class to icon alb element: move ***/
.av_font_icon.av-icon-style-border.move .av-icon-char {
position: relative;
display: inline-block;
overflow: hidden; /** here you can set to visible if you like to have both effects ***/
background-color: #fff;
-webkit-transition: background .5s,color .5s,-webkit-box-shadow .5s;
transition: background .5s,color .5s,-webkit-box-shadow .5s;
transition: background .5s,color .5s,box-shadow .5s;
transition: background .5s,color .5s,box-shadow .5s,-webkit-box-shadow .5s;
border-radius: 50%;
-webkit-box-shadow: 0 0 0 2px #bbb;
box-shadow: 0 0 0 2px #bbb;
height: 80px;
}
.av_font_icon.av-icon-style-border.move .av-icon-char:hover {
background-color: #6b6b6b;
-webkit-box-shadow: 0 0 0 6px rgba(0,0,0,.1);
box-shadow: 0 0 0 6px rgba(0,0,0,.1);
}
.av_font_icon.av-icon-style-border.move .av-icon-char:before {
position: absolute;
left: 50%;
top: 50%;
-webkit-transform: translate(-50%,-50%);
transform: translate(-50%,-50%);
}
.av_font_icon.av-icon-style-border.move .av-icon-char:hover:before {
animation: toRightFromLeft .5s forwards; /*** this is the animation name - see right side for definition ***/
color: #fff;
-webkit-filter: drop-shadow(2px 2px 5px #333);
filter: drop-shadow(2px 2px 5px #333);
}/*** animation for that ****/
@-webkit-keyframes toRightFromLeft {
49% {
-webkit-transform:translateX(100%) translateY(-50%);
transform:translateX(100%) translateY(-50%)
}
50% {
opacity:0;
-webkit-transform:translateX(-100%) translateY(-50%);
transform:translateX(-100%) translateY(-50%)
}
51% {
opacity:1
}
}
@keyframes toRightFromLeft {
49% {
-webkit-transform:translateX(100%) translateY(-50%);
transform:translateX(100%) translateY(-50%)
}
50% {
opacity:0;
-webkit-transform:translateX(-100%) translateY(-50%);
transform:translateX(-100%) translateY(-50%)
}
51% {
opacity:1
}
}to have a color sonar with the color the icon has
/*** redefine the sonarEffect with "currentColor" instead of #fff ***/
@-webkit-keyframes sonarEffect {
0% {opacity: 0.3;}
40% {opacity: 0.5;box-shadow: 0 0 0 2px rgba(255,255,255,0.1), 0 0 10px 10px currentColor, 0 0 0 10px rgba(255,255,255,0.5);}
100% {box-shadow: 0 0 0 2px rgba(255,255,255,0.1), 0 0 10px 10px currentColor, 0 0 0 10px rgba(255,255,255,0.5);-webkit-transform: scale(1.5);opacity: 0;}
}
@keyframes sonarEffect {
0% {opacity: 0.3;}
40% {opacity: 0.5;box-shadow: 0 0 0 2px rgba(255,255,255,0.1), 0 0 10px 10px currentColor, 0 0 0 10px rgba(255,255,255,0.5);}
100% {box-shadow: 0 0 0 2px rgba(255,255,255,0.1), 0 0 10px 10px currentColor, 0 0 0 10px rgba(255,255,255,0.5);transform: scale(1.5);opacity: 0;}
}Sie sehen gerade einen Platzhalterinhalt von Facebook. Um auf den eigentlichen Inhalt zuzugreifen, klicken Sie auf die Schaltfläche unten. Bitte beachten Sie, dass dabei Daten an Drittanbieter weitergegeben werden.
Mehr InformationenSie sehen gerade einen Platzhalterinhalt von Instagram. Um auf den eigentlichen Inhalt zuzugreifen, klicken Sie auf die Schaltfläche unten. Bitte beachten Sie, dass dabei Daten an Drittanbieter weitergegeben werden.
Mehr Informationen