Skip to content

Rotating Star Effect

Solved Let's Build It

Did this solution help you?
Did you find the suggested solution useful? Why not buy me a coffee? It's a nice gesture, and a great way to show your appreciation 💗

Related Topics
  • How to deploy WordPress.org Developer theme

    Solved Configure
    4
    1 Votes
    4 Posts
    452 Views
    @Hari the real issue here is that I don’t think it can be used as a theme for WordPress because of the dependencies it clearly has, including its own Web server. My view here is that this is designed to be a complete development environment outside of the WordPress core.
  • 15 Votes
    51 Posts
    3k Views
    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
    2
    1 Votes
    2 Posts
    571 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.
  • hover link effect

    Solved Customisation
    18
    1
    6 Votes
    18 Posts
    1k 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.
  • [NodeBB] greeting message

    Solved Customisation
    2
    1
    3 Votes
    2 Posts
    669 Views
    @pwsincd welcome to sudonix, and thanks for the comments. What your looking for is here https://sudonix.com/topic/195/nodebb-welcome-message/3?_=1648295651358
  • 1 Votes
    2 Posts
    393 Views
    @hari the cache level for woocommerce should always be bypass. Any caching of woocommerce will cause you serious issues and will result in the checkout process not functioning correctly. This does mean that the overall experience will be slower (depending on geographic location) although CF is known to cause significant issues hence the need to bypass. If you want to cache as much as possible, then set rules to bypass caching on the cart and account pages etc.
  • Discourse Design Change

    Customisation
    25
    7 Votes
    25 Posts
    2k Views
    @phenomlab okay
  • CSS Help on my Flarum

    Solved Customisation
    5
    2
    2 Votes
    5 Posts
    622 Views
    @mike-jones Yes, you’ll typically see this type of behaviour if there is another style that has higher priority in the sense that yours will be overridden. Using !important will override the higher preference, but should be used sparingly rather than everywhere.