WEBLEB
Accueil
Éditeur
Connexion
Pro
Français
English
Français
Español
Português
Deutsch
Italiano
हिंदी
Bouton et calque animés CSS
389
ByBy.inc
Ouvrir dans l'éditeur
Publiez votre code
Recommandé
29 August 2024
Horloge Ui - Bouton sombre/clair
25 September 2025
Cases à cocher CSS animées avec SVG et JavaScript
1 March 2025
Tableau de bord d'administration propre et réactif
HTML
Copy
CSS
Copy
* { margin: 0; padding: 0; box-sizing: border-box; } body { background-color: #18202C; 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; } .button { width: 70px; height: 70px; border-radius: 50%; background: #8c8c8c; /* Cor de fundo */ position: relative; animation: buttonLoop 1s linear infinite; } @keyframes buttonLoop { 0% { transform: scale(1); } 50% { transform: scale(1.1); } 100% { transform: scale(1); } } .layer1 { /* A primeira camada: um clique e a sombra se movem */ width: 200px; height: 200px; background-color: rgba(255,255,255,0.1); position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); border-radius: 50%; animation: layerPulse 1s ease-in-out infinite; } @keyframes layerPulse { 0% { transform: scale(1); box-shadow: 0 0 10px rgba(255,255,255,0.5); } 50% { transform: scale(1.1); box-shadow: 0 0 20px rgba(255,255,255,0.8); } 100% { transform: scale(1); box-shadow: 0 0 10px rgba(255,255,255,0.5); } }
JS
Copy
/* Replace with your JS Code (Leave empty if not needed) */