WEBLEB
होम
संपादक
लॉग इन करें
Pro
हिंदी
English
Français
Español
Português
Deutsch
Italiano
हिंदी
डेटा मॉर्फिंग
44
ByBy.inc
संपादक में खोलें
अपना कोड प्रकाशित करें
अनुशंसित
25 November 2024
उत्तरदायी छात्र डेटा वेबसाइट
28 March 2023
फॉर्म डेटाबेस कनेक्शन - Php
12 July 2025
डेटा ब्लूम
HTML
Copy
1
2
3
CSS
Copy
* { margin: 0; padding: 0; box-sizing: border-box; } body { background-color: #000; 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: 50%; left: 50%; transform: translate(-50%, -50%); display: flex; align-items: center; justify-content: center; width: 100%; height: 50%; overflow: hidden; background-color: #000; } /* Animação dos elementos de dados */ .data-element { position: relative; width: 100px; height: 100px; background-color: #fff; border-radius: 10px; transform-origin: center center; display: flex; flex-direction: column; justify-content: center; align-items: center; animation: data-morph 1s ease infinite; } .data-element:nth-child(1) { animation-delay: 0s; } .data-element:nth-child(2) { animation-delay: 0.2s; } .data-element:nth-child(3) { animation-delay: 0.4s; } @keyframes data-morph { 0% { transform: scale(1); } 100% { transform: scale(1.3); } }
JS
Copy
/* Replace with your JS Code (Leave empty if not needed) */