WEBLEB
होम
संपादक
लॉग इन करें
Pro
हिंदी
English
Français
Español
Português
Deutsch
Italiano
हिंदी
डेटा ब्लूम
51
ByBy.inc
संपादक में खोलें
अपना कोड प्रकाशित करें
क्या आपको एक वेबसाइट चाहिए?
अनुशंसित
28 March 2023
फॉर्म डेटाबेस कनेक्शन - Php
25 November 2024
उत्तरदायी छात्र डेटा वेबसाइट
HTML
Copy
.flor
{
animation:
DataBloom
1s
ease-out
infinite;
}
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; } .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 principal - Florescer de dados */ @keyframes DataBloom { 0% { transform: scale(0); opacity: 0; } 100% { transform: scale(1); opacity: 1; } } .flor { position: absolute; width: 80px; height: 80px; border-radius: 50%; background: linear-gradient(to bottom, #A6E22E, #66D9EF, #AE81FF); opacity: 0; animation: DataBloom 1s ease-out infinite; } .flor.flor1 { top: 20%; left: 2%; animation-delay: 0.1s; } /* Colocando as flores em posições diferentes */ .flor.flor2 { top: 60%; left: 40%; animation-delay: 0.2s; } .flor.flor3 { top: 80%; left: 80%; animation-delay: 0.3s; }
JS
Copy
/* Replace with your JS Code (Leave empty if not needed) */