WEBLEB
Accueil
Éditeur
Connexion
Pro
Français
English
Français
Español
Português
Deutsch
Italiano
हिंदी
Exemple d'animation de fragment CSS
368
ByBy.inc
Ouvrir dans l'éditeur
Publiez votre code
Recommandé
29 November 2024
Un code par efficientapp58
26 February 2025
Un code par securearray494
5 April 2025
un site Web de plateforme
HTML
Copy
CSS
Copy
* { margin: 0; padding: 0; box-sizing: border-box; } body { background-color: #181818; 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%; width: 100%; 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; } .fragment{ position: relative; width: 100px; height: 100px; background: #9D26BF; /* Cor do emoji */ animation: fragmentDrip 4s ease-in-out infinite; } @keyframes fragmentDrip { 0% { transform: translate(0, 0) rotate(0deg); opacity: 1; filter: blur(0px); } 50% { transform: translate(20px, -10px) rotate(180deg); opacity: 0.5; filter: blur(10px); } 100% { transform: translate(-10px, 20px) rotate(360deg); opacity: 0; filter: blur(20px); } } /* Animação - as animações devem refletir o efeito da busca incessante por validação e como pode levar à aceleração digital */
JS
Copy
/* Replace with your JS Code (Leave empty if not needed) */