WEBLEB
Home
Editor
Login
Pro
English
English
Français
Español
Português
Deutsch
Italiano
हिंदी
CSS Animated Background with Shapes and Text
611
byby.createsite
Open In Editor
Publish Your Code
Recommended
17 July 2024
HTML & CSS Payment Form
6 November 2025
Interactive World Map with React and D3
12 May 2025
Text To File
HTML
Copy
CSS
Copy
* { margin: 0; padding: 0; box-sizing: border-box; } body { background: black; 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: 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; } .function { color: #A6E22E; } .animation-container { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); display: flex; align-items: center; justify-content: center; width: 100%; aspect-ratio: 9/16; height: 90vh; overflow: hidden; background: transparent; } @keyframes loading-animation { 0% { transform: scale(1) rotate(0deg); background-size: 200px 200px; } 25% { transform: scale(1.2) rotate(90deg); background-size: 220px 220px; } 50% { transform: scale(1) rotate(180deg); background-size: 240px 240px; } 100% { transform: scale(1) rotate(360deg); background-size: 260px 260px; } } @keyframes branching { 0% { transform: scale(1); } 100% { transform: scale(2); } } .loading-element { position: relative; width: 60px; height: 60px; background-size: 200px 200px; border-radius: 50%; animation: loading-animation 1s linear infinite; } .loading-element:before { content: ""; position: absolute; width: 30px; height: 30px; background-color: red; top: 50%; left: 50%; transform: translate(-50%, -50%); animation: loading-animation 1s linear infinite; } .loading-element:after { content: ""; position: absolute; width: 20px; height: 20px; background-color: transparent; top: 50%; left: 50%; transform: translate(-50%, -50%); animation: loading-animation 1s linear infinite; } .branching-element { position: relative; width: 40px; height: 40px; background-size: 100px 100px; border-radius: 50%; animation: branching 2s linear infinite; } .branching-element:before, .branching-element:after { content: ""; position: absolute; width: 20px; height: 20px; background-color: white; top: 50%; left: 50%; transform: translate(-50%, -50%); animation: branching 2s linear infinite; } .branching-element:before:before, .branching-element:before:after, .branching-element:after:before, .branching-element:after:after { content: ""; position: absolute; width: 10px; height: 10px; background-color: red; top: 50%; left: 50%; transform: translate(-50%, -50%); animation: branching 2s linear infinite; } /* A cada rodada, adiciona uma camada nova. Isso simboliza o crescimento do entendimento e a multiplicação das ideias. */ @keyframes crescimento { 0% { transform: scale(1); } 100% { transform: scale(2); } } .crescende { position: relative; width: 20px; height: 20px; background-size: 40px 40px; border-radius: 50%; animation: crescimento 3s linear infinite; } .crescende:before, .crescende:after { content: ""; position: absolute; width: 10px; height: 10px; background-color: transparent; top: 50%; left: 50%; transform: translate(-50%, -50%); animation: crescimento 3s linear infinite; } /* Com a cada nova ideia, sentimo uma sensação de liberdade e crescimento. */ /* A cada rodada, a carga é maior, representando o aumento da sabedoria e a busca pela perfeição. */ .carregamento { position: relative; width: 50%; height: 50%; background-size: 100px 100px; border-radius: 50%; animation: loading-animation 2s linear infinite; } .carregamento:before { content: ""; position: absolute; width: 25%; height: 25%; top: 50%; left: 50%; transform: translate(-50%, -50%); background: linear-gradient(to bottom right, #03A9F4, #3F87F5); animation: crescimento 2s linear infinite; } .carregamento:after { content: ""; position: relative; width: 10%; height: 10%; top: 50%; left: 50%; transform: translate(-50%, -50%); background: linear-gradient(to bottom right, #03A9F4, #3F87F5); animation: crescimento 2s linear infinite; }
JS
Copy
/* Replace with your JS Code (Leave empty if not needed) */