WEBLEB
Accueil
Éditeur
Connexion
Pro
Français
English
Français
Español
Português
Deutsch
Italiano
हिंदी
Exemple d'animation de formes CSS
618
byby.createsite
Ouvrir dans l'éditeur
Publiez votre code
Recommandé
25 April 2025
Un code de Metehan
4 January 2025
Page d'accueil de Matrice Rouge
9 September 2024
Galerie de poissons
HTML
Copy
CSS
Copy
* { margin: 0; padding: 0; box-sizing: border-box; } body { background-color: #1C1E23; display: flex; align-items: center; justify-content: center; height: 100vh; overflow: hidden; } .codigo { position: absolute; top: 0; left: 50%; transform: translateX(-50%); background: #272822; color: #F8F8F2; font-family: 'Consolas', 'Monaco', monospace; font-size: 18px; padding: 20px; border-radius: 8px; white-space: pre-line; text-align: left; line-height: 1.6; max-height: 50%; max-width: 90%; width: 100%; overflow-y: auto; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3); } .selector { color: #F92672; } .property { color: #66D9EF; } .value-number { color: #AE81FF; } .value-string { color: #E6DB74; } .value-color { color: #A6E22E; } .brace { color: #F8F8F2; } .comment { color: #75715E; } .function { color: #A6E22E; } .animation-container { position: absolute; top: 75%; left: 50%; transform: translate(-50%, -50%); display: flex; align-items: center; justify-content: center; width: 100%; height: 50%; overflow: hidden; background: transparent; } .container { position: relative; width: 200px; height: 200px; } .shape { position: absolute; width: 50px; height: 50px; background-color: #FFC000; border-radius: 50%; opacity: 1; animation: shapeAnimation 5s infinite alternate linear; } .shape::before { content: ''; position: absolute; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0); border-radius: 50%; transform: translate(-50%, -50%); animation: outlineAnimation 5s infinite alternate linear; } @keyframes shapeAnimation { 0% { transform: scale(1) } 50% { transform: scale(1.1) animation-delay: 1s; } 100% { transform: scale(0.8) } } @keyframes outlineAnimation { 0% { transform : rotate(0deg); opacity: 0; } 50% { transform : rotate(-45deg); opacity: 1; } 100% { transform : rotate(45deg); opacity: 0; } }
JS
Copy
const canvas = document.getElementById('matrixCanvas'); const ctx = canvas.getContext('2d'); function resizeCanvas() { canvas.width = window.innerWidth; canvas.height = window.innerHeight; } resizeCanvas(); window.addEventListener('resize', resizeCanvas); const matrixChars = 'ABCDEFGHIJKLMNOPQRSTUVWXYZ123456789@#$%^&*()'; const fontSize = 16; const columns = canvas.width / fontSize; const drops = Array.from({ length: columns }).fill(1); function draw() { ctx.fillStyle = 'rgba(0, 0, 0, 0.05)'; ctx.fillRect(0, 0, canvas.width, canvas.height); ctx.fillStyle = '#0f0'; ctx.font = `${fontSize}px monospace`; drops.forEach((y, i) => { const text = matrixChars[Math.floor(Math.random() * matrixChars.length)]; const x = i * fontSize; ctx.fillText(text, x, y * fontSize); if (y * fontSize > canvas.height && Math.random() > 0.975) { drops[i] = 0; } drops[i]++; }); } setInterval(draw, 50);