डेटा ब्लूम

456 ByBy.inc

संपादक में खोलें अपना कोड प्रकाशित करें

अनुशंसित

21 September 2024

सत्यापन के साथ प्रोफ़ाइल डेटा जोड़ने के लिए जोड़ें बटन खोलें

28 July 2025

कोड ब्लूम

16 September 2025

HTML हार्ट एनिमेशन डेटा स्ट्रीम

HTML

CSS

* {
  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; }

अनुशंसित

सत्यापन के साथ प्रोफ़ाइल डेटा जोड़ने के लिए जोड़ें बटन खोलें

कोड ब्लूम

HTML हार्ट एनिमेशन डेटा स्ट्रीम

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS