WEBLEB
Accueil
Éditeur
Connexion
Pro
Français
English
Français
Español
Português
Deutsch
Italiano
हिंदी
Bouton et calque animés CSS
917
byby.createsite
Ouvrir dans l'éditeur
Video
Publiez votre code
0
Recommandé
15 May 2025
Modèle de site Web de commerce électronique HTML CSS
12 September 2025
Curseur d'images HTML CSS JavaScript
31 January 2025
Films de cartes CSS pures 3D
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) */