[Resolved] Beacon on icon

[Anders Nielsen]

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

[Anders Nielsen]

Little explainer video in the private section

[Fernando]

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!

[Anders Nielsen]

Awesome.. thanks

[Fernando]

You’re welcome Anders!

[Author]

Posts