Skip to content

Blinking text Effect

Customisation
3 2 996 1
  • Hello 🙂

    small blinking text effect that I put on the name of my forum:

    here the code :

    :root {
         --site-title-blink: #CCCCCC;
    }
    
    /*Blink text effect */
    @keyframes text-blink {
        0%,
        20%,
        22%,
        25%,
        28%,
        55%,
        80%,
        100% {
            text-shadow: 0 0 2px #000,
                0 0 10px var(--site-title-blink),
                0 0 5px var(--site-title-blink),
                0 0 25px var(--site-title-blink);
            opacity: 1;
            color: var(--site-title-blink);
        }
    
        21%,
        24%,
        56% {
            opacity: 0.2;
            text-shadow: none;
        }
    }
    
    .navbar-default .navbar-brand {
        animation: 0.5s text-blink 1.5s infinite alternate;
        animation-iteration-count: 5;
        animation-duration: 1000ms;
    }
    
  • DownPWundefined DownPW marked this topic as a regular topic on
  • Hello 🙂

    small blinking text effect that I put on the name of my forum:

    here the code :

    :root {
         --site-title-blink: #CCCCCC;
    }
    
    /*Blink text effect */
    @keyframes text-blink {
        0%,
        20%,
        22%,
        25%,
        28%,
        55%,
        80%,
        100% {
            text-shadow: 0 0 2px #000,
                0 0 10px var(--site-title-blink),
                0 0 5px var(--site-title-blink),
                0 0 25px var(--site-title-blink);
            opacity: 1;
            color: var(--site-title-blink);
        }
    
        21%,
        24%,
        56% {
            opacity: 0.2;
            text-shadow: none;
        }
    }
    
    .navbar-default .navbar-brand {
        animation: 0.5s text-blink 1.5s infinite alternate;
        animation-iteration-count: 5;
        animation-duration: 1000ms;
    }
    

    @DownPW looks great ! Has that “broken neon light” look that you see in films. When I saw the title of this post, I instantly thought of the flashing text everyone had on their website in the 90’s and early 00’s but I like this effect a lot.

    Custom-Bates-Motel-No-Vacancy-Glass-Neon-Light-Sign-Beer-Bar.jpg_Q90.jpg_.webp

  • @DownPW looks great ! Has that “broken neon light” look that you see in films. When I saw the title of this post, I instantly thought of the flashing text everyone had on their website in the 90’s and early 00’s but I like this effect a lot.

    Custom-Bates-Motel-No-Vacancy-Glass-Neon-Light-Sign-Beer-Bar.jpg_Q90.jpg_.webp

    @phenomlab

    I love it too

    @phenomlab said in Blinking text Effect:

    Has that “broken neon light” look that you see in films.

    It’s exactly that, kind of old neon signs of bar or pubs a bit cyberpunk too 😉


Related Topics
  • 14 Votes
    17 Posts
    2k Views
    No problem dude ! I hope you have a good vacation. Enjoy your loved ones!
  • 4 Votes
    7 Posts
    2k Views
    @phenomlab oh no, that is 1 cent on the video, but you are right, symbols are similar… I just converted it to $1 , since it is more intuitive in daily life…
  • Interesting Widget code, but can't fetch API

    Solved Customisation nodebb
    26
    2 Votes
    26 Posts
    6k Views
    @Panda said in Interesting Widget code, but can’t fetch API: How did you drop that widget into the post there? I hadnt seen this BSgenerator anywhere on sudonix site, do you use it somewhere already? Yes, here https://sudonix.org/topic/414/corporate-bullshit-generator?_=1687774393044 It’s not a “post” or “topic” in the common sense. It is actually a page in it’s own right and leverages nodebb-plugin-custom-pages. This in turn creates a new “route” which behaves like a page, meaning it is then exposed for widgets. @Panda said in Interesting Widget code, but can’t fetch API: Also can you explain more what you mean by calling the code externally. In my API call example, how would I go about doing that? By this, I mean create all the required code in an external JS file that is reachable by the NodeBB instance - so, in “public” for example - or in my case /public/js. The widget then “calls” that file and because it runs outside of the scope of NodeBB, you just need to return the values to the widget. Hope this makes sense?
  • Header Menu After Upgrading V3.1.1

    Solved Customisation header nodebb
    2
    1
    2 Votes
    2 Posts
    677 Views
    @cagatay this relates to a change the css classes used for the brand header meaning it will now float to the left instead of right. If you’d like to retain the original behavior, you can add this css class [data-widget-area="brand-header"] { justify-content: end; display: flex; } Further information here https://community.nodebb.org/topic/17090/manual-build-a-custom-header-in-harmony/19?_=1684069325296
  • Heading text on NodeBB forum

    Solved Customisation
    27
    1 Votes
    27 Posts
    5k Views
    @mventures I’ve not done anything here.
  • Fixing YouTube videos css

    Solved WordPress css
    8
    2 Votes
    8 Posts
    1k Views
    @phenomlab It looks good, but not anymore. I’ve already lost so much time. Now it’s time to move on
  • The best css to customize our logo?

    Solved Customisation css
    2
    1 Votes
    2 Posts
    1k Views
    @Sala This should look better .sidenav .navbar-brand { padding-top: 0.5rem; padding-bottom: 0.5rem; } [image: 1669026666905-e5cec20e-be36-4ee8-9129-fd11ad4656ac-image.png] You can increase the top and bottom padding by increasing the values above.
  • Link Text Colour.

    Solved Customisation customise
    5
    2
    2 Votes
    5 Posts
    1k Views
    @phenomlab Thx again for the reply. Well I am sure that it will be well worth the wait. I will watch with anticipation. For now it is OK. Just small minor irritations I fell in a lot of NodeBB ‘default’ things.