[Resolved] Beacon on icon

Home Forums Support [Resolved] Beacon on icon

Home Forums Support Beacon on icon

Viewing 5 posts - 1 through 5 (of 5 total)
  • Author
    Posts
  • #2274472
    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

    This is my site: Angst.dk

    #2274500
    Anders Nielsen

    Little explainer video in the private section

    This is my site: Angst.dk

    #2274510
    Fernando
    Customer Support

    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!

    #2274751
    Anders Nielsen

    Awesome.. thanks

    This is my site: Angst.dk

    #2275458
    Fernando
    Customer Support

    You’re welcome Anders!

Viewing 5 posts - 1 through 5 (of 5 total)
  • You must be logged in to reply to this topic.