Skip to content

Rotating Star Effect

Solved Let's Build It
17 4 5.5k 1

Did this solution help you?
Did you find the suggested solution useful? Support 💗 Sudonix with a coffee ☕
If your organisation needs deeper expertise around infrastructure, security, or technology leadership, learn more about Phenomlab Ltd. Many of the deeper technical guides behind Sudonix are published there.

Related Topics
  • "Glass" (shine) effect on Sudonix logo

    Let's Build It animation shine
    7
    4 Votes
    7 Posts
    5k Views
    phenomlab
    @DownPW said in "Glass" (shine) effect on Sudonix logo: Perfect with White background theme but much less with black themes backgrounds (we see the edges of the shine effect) Yes, you will need to modify the CSS according. For example, on Sudonix, I use --bs-node-shine: linear-gradient(90deg, rgba(28, 38, 44, 0) 0%, rgba(74, 100, 116, 0.5) 50%, rgba(28, 38, 44, 0) 100%); Essentially, you choose the base background, the shine colour, and then the base background again.
  • 3 Votes
    2 Posts
    2k Views
    DownPW
    Very great
  • navigation menu panel on mobile

    Solved Customisation nodebb css
    8
    1
    7 Votes
    8 Posts
    3k Views
    phenomlab
    @crazycells hmm. That’s odd. I haven’t made any changes from recollection but I could be wrong. I’ll need to check. EDIT - very strange. I honestly don’t recall adding the below CSS block to alter the bottom bar, but you’re right… .bottombar-nav { padding: 0px !important; } I’ve removed this so it reflects stock Harmony.
  • Material View Support for Stock NodeBB

    Unsolved Let's Build It material view javascript css
    51
    4
    15 Votes
    51 Posts
    27k Views
    DownPW
    Oh yes, that’s what’s super cool, I learn something every day. Afterwards I start from so low in JS
  • The best css to customize our logo?

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

    Solved Customisation css link hover
    18
    1
    6 Votes
    18 Posts
    7k Views
    phenomlab
    @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.
  • WordPress site

    General wordpress
    118
    10 Votes
    118 Posts
    61k Views
    JAC
    @jac said in WordPress site: It’s Wordpress OUT, and Ghost IN it seems! *preference based . Even County’s site uses Wordpress . Although that does serve it’s purpose.
  • Discourse Design Change

    Customisation design change css html
    25
    7 Votes
    25 Posts
    10k Views
    RiekMedia
    @phenomlab okay