WEBLEB
Home
Editor
Login
Pro
English
English
Français
Español
Português
Deutsch
Italiano
हिंदी
CSS Animation Container HTML Elements
429
ByBy.inc
Open In Editor
Publish Your Code
Recommended
13 November 2024
Frame Effect to Images using Pure CSS
30 August 2025
Cowboy Carter: Beyoncé Album HTML Code
12 July 2025
animation
HTML
Copy
CSS
Copy
* { margin: 0; padding: 0; box-sizing: border-box; } body { background:url("./thumb.jpg") no-repeat center center; 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; /* Composição de elementos que refletem a impressão digital */ .elemento-1 { width: 20px; height: 20px; background: RGBA(255, 0, 0, 0.5); border-radius: 50%; animation: pulse 2s linear infinite; } /* Elementos que representam a essência digital */ .elemento-2, .elemento-3 { position: absolute; background: RGBA(0, 255, 0, 0.5); width: 10px; height: 10px; border-radius: 50%; animation: girar 2s linear infinite; } .elemento-2 { top: 50%; left: 50%; transform: translate(-50%, -50%); } /* Elementos que simbolizam a conexão digital */ .elemento-4 { position: absolute; width: 20px; height: 20px; background: RGBA(0, 0, 255, 0.5); border-radius: 50%; animation: onda 2s linear infinite; } .elemento-4 { top: 70%; left: 50%; transform: translate(-50%, -50%); } } @keyframes pulse { /* Expansão e comprimento da bolha digital */ 0% { transform: scale(1, 1); } 50% { transform: scale(1.2, 1.2); } 100% { transform: scale(1, 1); } } @keyframes girar { /* Rotação constante para simbolizar movimentação digital */ 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } } @keyframes onda { /* Onda que se move para representar a conexão digital */ 0% { transform: translateX(0); } 50% { transform: translateX(20px); } 100% { transform: translateX(0); } }
JS
Copy
/* Replace with your JS Code (Leave empty if not needed) */