Skip to content

Blinking text Effect

Customisation
3 2 1.4k 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
  • External Links - New Window

    Solved Customisation nodebb links settings
    8
    2 Votes
    8 Posts
    1k Views
    @Sampo2910 search the forum here for ogproxy which is the client side version of that plugin I wrote. It’s in use here on this forum.
  • Heading text on NodeBB forum

    Solved Customisation
    27
    1 Votes
    27 Posts
    9k Views
    @mventures I’ve not done anything here.
  • NodeBB: Creating pages

    Solved Configure nodebb create page
    9
    0 Votes
    9 Posts
    3k Views
    OK, I think I have figured out how to place a link in the footer which will click to a new page.
  • Footer bar add center text

    Solved Customisation css
    41
    1
    8 Votes
    41 Posts
    15k Views
    @phenomlab said in Footer bar add center text: div#console-nav-tab Ah ok test with bottom: 0px !important; idem
  • hover link effect

    Solved Customisation css link hover
    18
    1
    6 Votes
    18 Posts
    5k Views
    @DownPW Looking at the underlying code, class start is being added on hover by jQuery in this function document.querySelectorAll(".button-gradient, .button-transparent").forEach((button) => { const style = getComputedStyle(button); const lines = document.createElement("div"); lines.classList.add("lines"); const groupTop = document.createElement("div"); const groupBottom = document.createElement("div"); const svg = createSVG( button.offsetWidth, button.offsetHeight, parseInt(style.borderRadius, 10) ); groupTop.appendChild(svg); groupTop.appendChild(svg.cloneNode(true)); groupTop.appendChild(svg.cloneNode(true)); groupTop.appendChild(svg.cloneNode(true)); groupBottom.appendChild(svg.cloneNode(true)); groupBottom.appendChild(svg.cloneNode(true)); groupBottom.appendChild(svg.cloneNode(true)); groupBottom.appendChild(svg.cloneNode(true)); lines.appendChild(groupTop); lines.appendChild(groupBottom); button.appendChild(lines); button.addEventListener("pointerenter", () => { button.classList.add("start"); }); svg.addEventListener("animationend", () => { button.classList.remove("start"); }); }); }) The CSS for start is below .button-gradient.start .lines svg, .button-transparent.start .lines svg { animation: stroke 0.3s linear; } And this is the corresponding keyframe @keyframes stroke { 30%, 55% { opacity: 1; } 100% { stroke-dashoffset: 5; opacity: 0; } } It’s using both CSS and SVG, so might not be a simple affair to replicate without the SVG files.
  • Link vs Refresh

    Solved Customisation nodebb blog customization
    20
    2
    8 Votes
    20 Posts
    5k Views
    @pobojmoks Do you see any errors being reported in the console ? At first guess (without seeing the actual code or the site itself), I’d say that this is AJAX callback related
  • NodeBB changing color of the text

    Solved Customisation
    7
    2 Votes
    7 Posts
    2k Views
    @phenomlab said in NodeBB changing color of the text: @marusaky This ought to to it a.permalink, a.permalink:active, a.permalink:focus, a.permalink:hover { color: #ffffff; } works great, thanks a lot
  • Fontawesome 5

    Unsolved Customisation fonts css nodebb
    14
    1 Votes
    14 Posts
    4k Views
    @pwsincd hi. Just following up on this thread (I know it’s old) but was curious to understand if it’s still an issue or not ?