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;}
}Webers Webdesign
Webers Webdesign
Ludwig-Schopp-Straße 27
53117 Bonn
Mit dem Laden der Karte akzeptieren Sie die Datenschutzerklärung von Google.
Mehr erfahren