JavaScript ist deaktiviert. Für eine bessere Darstellung aktiviere bitte JavaScript in deinem Browser, bevor du fortfährst.

Auf Thema antworten

Beitrag: [QUOTE="MoistPony, post: 14248, member: 4877"] Hi, es ist der vollständige Code. Ich benutze den Dora Baukasten, da ich mich mit HTML kaum auskenne. Die Seite lässt es zu in verschiedenen Ebenen html Code einzubetten um spezielle Effekte etc. zu erreichen. Dadurch kann es sich natürlich bei dem Problem um einen Fehler von Dora handeln, allerdings gibts da leider noch nicht so viel hilfe, daher hatte ich auf eine Lösung im Code gehofft. Hier nochmal der Code nach deinem Vorschlag: <div id="blob"></div> <div id="blur"></div> [CODE]<style> body { background-color: black; height: 100vh; margin: 0rem; overflow: hidden; } @keyframes rotate { from { rotate: 0deg; } 50% { scale: 1 1.2; } to { rotate: 360deg; } } #blob { pointer-evenbts: none; background-color: white; height: 34vmax; aspect-ratio: 1; position: absolute; left: 50%; top: 50%; translate: -50% -50%; border-radius: 50%; background: linear-gradient(to right, aquamarine, teal); animation: rotate 35s infinite; opacity: 0.4; } #blur { pointer-events: none; height: 100%; width: 100%; position: absolute; z-index: 2; backdrop-filter: blur(12vmax); } </style> <script> /* -- Glow effect -- */ const blob = document.getElementById("blob"); window.onpointermove = event => { const { clientX, clientY } = event; blob.animate({ left: `${clientX}px`, top: `${clientY}px` }, { duration: 3000, fill: "forwards" }); } </script> [/CODE] Vielen Dank für dein Interesse :) [/QUOTE]