WEBLEB
Accueil
Éditeur
Connexion
Pro
Français
English
Français
Español
Português
Deutsch
Italiano
हिंदी
moi
2347
ilham
Ouvrir dans l'éditeur
Publiez votre code
Recommandé
29 August 2025
Extrait d'animation de mémoire CSS
4 July 2025
mémoire de survol
HTML
Copy
CSS
Copy
/* Replace with your CSS Code (Leave empty if not needed) */ body, html{ height: 100%; margin: 0; display: flex; justify-content: center; align-items: center; background: #040509; overflow: hidden; font-size: 62.5% } /* The @property CSS at-rule is part of the CSS Houdini umbrella of APIs. It */ @property --angle { syntax: '<angle>'; initial-value: 0deg; inherits: false; } .spiral{ display: flex; align-items: center; gap: 10px; position: absolute; color: #e0ecef; font-family: "sans-serif"; } @keyframes spiral{ 0%{ --angle: 0deg; } 100%{ --angle: 360deg; } } .character{ font-size: 2.8rem; color: white; text-transform: uppercase; transform: translateY(calc(sin(var(--angle)) * 100px)) scale(calc(cos(var(--angle)) * 0.5 + 0.5)); animation: spiral 4s linear infinite; } @media (max-width: 490px){ .character{ font-size: 2.2rem } }
JS
Copy
/* Replace with your JS Code (Leave empty if not needed) */ let isFirefox = typeof InstallTrigger !== 'undefined'; const words = "ANGGIE ANNISA RAMADHANI"; let ANGLE = 360; const ANIMATION_DURATION = 4000; const animation = () => { ANGLE -= 1; // Incremento do ângulo document.querySelectorAll(".spiral *").forEach((el, i) => { const translateY = Math.sin(ANGLE * (Math.PI / 120)) * 100; const scale = Math.cos(ANGLE * (Math.PI / 120)) * 0.5 + 0.5; const offset = parseInt(el.dataset.offset); const delay = i * (ANIMATION_DURATION / 16) - offset; setTimeout(() => { el.style.transform = `translateY(${translateY}px) scale(${scale})`; }, delay); }); requestAnimationFrame(animation); }; const characters = words.split("").forEach((char, i) => { const createElement = (offset) => { const div = document.createElement("div"); div.innerText = char; div.classList.add("character"); div.setAttribute("data-offset", offset); div.style.animationDelay = `-${i * (ANIMATION_DURATION / 16) - offset}ms` return div; }; document.querySelector("#spiral").append(createElement(0)); document .querySelector("#spiral2") .append(createElement((isFirefox ? 1 : -1) * (ANIMATION_DURATION / 2))); }); // @property CSS doesn't work in Firefox, so it must be animated using JavaScript. if(isFirefox){ animation(); }