Skip to content

Blinking text Effect

Customisation
3 2 1.5k 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
  • 2 Votes
    1 Posts
    436 Views
    No one has replied
  • TNG + Nodebb

    General tng genealogy nodebb plugin
    4
    0 Votes
    4 Posts
    2k Views
    @Madchatthew said in TNG + Nodebb: you have to try and use duck tape and super glue to change something to make it do what you want it to do I couldn’t have put that better myself.
  • 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.
  • Quote design CSS

    Solved Customisation css quote
    15
    1
    4 Votes
    15 Posts
    5k Views
    @DownPW yes, that does make sense actually. I forgot to mention the layout of Sudonix is custom so that would have an impact on the positioning. Good spot
  • Link Text Colour.

    Solved Customisation customise
    5
    2
    2 Votes
    5 Posts
    2k 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.
  • 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
  • Adjusting the size of boxes in posts-list class

    Solved Customisation nodebb
    3
    3 Votes
    3 Posts
    2k Views
    @phenomlab thanks a lot, this combination works best .posts-list .posts-list-item .content { overflow: auto; max-height: 600px; }
  • CSS codes for fa-info icon

    Solved Customisation nodebb
    9
    1
    6 Votes
    9 Posts
    2k Views
    I have just figured it out… it can be targeted with text-decoration-color: I was mistakenly using color