WEBLEB
Home
Editor
Accedi
Pro
Italiano
English
Français
Español
Português
Deutsch
Italiano
हिंदी
Esempio di animazione di riflessione CSS
409
ByBy.inc
Apri nell'Editor
Pubblica il Tuo Codice
Consigliato
14 March 2025
Interazione dei prezzi (HTML, CSS e JS)
16 February 2025
Un codice di NotYoEA
26 December 2024
Un codice di securefunction317
HTML
Copy
CSS
Copy
/* Defina a base do CSS */ * { margin: 0; padding: 0; box-sizing: border-box; } body { background-color: black; background-size: cover; 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: 25%; max-width: 75%; width: 75%; height: 25%; top:15%; overflow-y: hidden; box-shadow: -8px 10px 18px rgba(0, 0, 0, 0.55); } .selector { color: #F92672; } .property { color: #66D9EF; } .value-number { color: #AE81FF; } .value-string { color: #E6DB74; } .value-color { color: #A6E22E; } .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; } /* Animação de refletos quebrados */ .refletos { position: relative; width: 20%; height: 20%; } .refleto1 { position: absolute; top: 0; left: 0; width: 50%; height: 100%; background-color: rgba(255, 255, 255, 0.5); border-radius: 50% 0 0 50%; } .refleto2 { position: absolute; top: 0; right: 0; width: 50%; height: 100%; background-color: rgba(255, 255, 255, 0.5); border-radius: 0 50% 50% 0; } .refleto3 { position: absolute; bottom: 0; left: 0; width: 100%; height: 200%; background-color: rgba(255, 255, 255, 0.5); border-radius: 50% 50% 0 0; } .refleto4 { position: absolute; bottom: 0; right: 0; width: 100%; height: 200%; background-color: rgba(255, 255, 255, 0.5); border-radius: 0 0 0 50%; } .refleto1, .refleto2, .refleto3, .refleto4 { animation: break-reflect 2s infinite; } @keyframes break-reflect { 0% { transform: scale(1); } 50% { transform: scale(1.2); } 100% { transform: scale(1); } } /* Animação de código */ .codigo-container { position: absolute; top: 0; left: 0; background-color: #282828; color: #F8F8F2; padding: 20px; border-radius: 8px; white-space: pre-line; text-align: left; line-height: 1.6; max-height: 50%; max-width: 50%; width: 50%; height: 50%; top: 25%; overflow-y: hidden; } .codigo-container .codigo { font-size: 12px; } .codigo-container .selector { color: #F92672; } .codigo-container .property { color: #66D9EF; } .codigo-container .value-number { color: #AE81FF; } .codigo-container .value-string { color: #E6DB74; } /* Animação de código quebrado */ .codigo-fragment { position: relative; width: 50%; height: 50%; background-color: rgba(255, 255, 255, 0.5); border-radius: 50%; } .fragment1 { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(255, 255, 255, 0.5); border-radius: 50% 0 0 50%; } .fragment2 { position: absolute; top: 0; right: 0; width: 100%; height: 100%; background-color: rgba(255, 255, 255, 0.5); border-radius: 0 50% 50% 0; } @keyframes break-fragment { 0% { transform: scale(1); } 50% { transform: scale(1.2); } 100% { transform: scale(1); } } .fragment1, .fragment2 { animation: break-fragment 2s infinite; } .fragment1, .fragment2{ box-shadow: 0 0 5px rgba(0,0,0,0.1); }
JS
Copy
/* Replace with your JS Code (Leave empty if not needed) */