Archived topic
Beacon on icon
4 replies · Started by Anders Nielsen on July 6, 2022
Viewing posts 1–5 of 5
Is there a god way using generateblocks "effect" section to implement a beacon effect like this:
.beacon{
position:absolute;
background-color:#73DB12;
height:1em;
width:1em;
margin-left:10px;
border-radius:50%;
-webkit-transform:translateX(-50%) translateY(-50%);
}
.beacon:before{
position:absolute;
content:"";
height:1em;
width:1em;
left:0;
top:0;
background-color:transparent;
border-radius:50%;
box-shadow:0px 0px 2px 2px #73DB12;
-webkit-animation:active 2s infinite linear;
animation:active 2s infinite linear;
}
@-webkit-keyframes active{
0%{
-webkit-transform:scale(.1);
opacity:1;
}
70%{
-webkit-transform:scale(2.5);
opacity:0;
}
100%{
opacity:0;
}
}
@keyframes active{
0%{
transform:scale(.1);
opacity:1;
}
70%{
transform:scale(2.5);
opacity:0;
}
100%{
opacity:0;
}
}I only whant the beacon to be on the icon
Link in private section
Little explainer video in the private section
I see. I believe it would be best to simply add the CSS through Appearance > Customize > Additional CSS, and add the beacon class to your Headline Block. Then, modify the CSS as such for example:
.beacon .gb-icon{
position:relative;
z-index:2;
}
.beacon .gb-icon:before{
position:absolute;
content:"";
height:2em;
width:2em;
left:50%;
top:50%;
background-color:transparent;
border-radius:50%;
box-shadow:0px 0px 4px 4px var(--global-color-2);
-webkit-animation:active 2s infinite linear;
animation:active 2s infinite linear;
z-index:1;
}
@-webkit-keyframes active{
0%{
-webkit-transform:translate(-60%,-50%) scale(0.1);
opacity:1;
}
70%{
-webkit-transform:translate(-65%,-50%) scale(1);
opacity:0;
}
100%{
opacity:0;
}
}
@keyframes active{
0%{
transform:translate(-60%,-50%) scale(0.1);
opacity:1;
}
70%{
transform:translate(-65%,-50%) scale(1);
opacity:0;
}
100%{
opacity:0;
}
}Hope this clarifies!
Awesome.. thanks
You’re welcome Anders!
This archived topic is closed to new replies.
