Starburst + Infinite Zoom

Spring over, og gå til indhold Chathistorik Du sagde: make a starburst css animation with infinite zoom on an image ChatGPT sagde: Tænkte i et par sekunder Nice — here's a single-file, production-ready example that creates a starburst/rays overlay while the image continuously and smoothly zooms (infinite). It's responsive, uses CSS only (no JS), and exposes a few CSS variables so you can easily tweak speed, intensity, and colors. Copy this into an .html file and open it in your browser. Starburst + Infinite Zoom

Scenic landscape — Starburst overlay + infinite zoom (pure CSS). Tweak variables in `:root`.

Notes & tips --zoom-duration controls how fast the zoom cycles. Longer = slower, shorter = faster. --zoom-scale controls how far the image zooms in (1 = no zoom). --rays-rotation-duration controls how fast the starburst spins. The starburst uses repeating-conic-gradient to produce the rays — it’s efficient and scales nicely. mix-blend-mode: screen (or overlay) makes the rays blend into the image naturally; change --rays-blend to experiment. If you want colored rays, change --ray-color and replace the gradient stops with rgba using that color (I kept white for a classic starburst). For better performance on mobile, reduce --zoom-duration or --zoom-scale, or disable the rays with a media query. If you want, I can: Provide a variant that uses canvas for more complex animated rays, Add CSS variables for ray width/density so you can control the number of rays, Or generate a version that uses background-image instead of an for a different layout. Which one would you like next? Der er ikke valgt nogen filDer er ikke valgt nogen fil ChatGPT kan tage fejl. Vi anbefaler at dobbelttjekke vigtig information.