CSS सर्कल एनीमेशन HTML स्निपेट

921 byby.createsite

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

अनुशंसित

25 November 2025

स्टिक मर्ज गेम HTML5 स्रोत कोड

28 October 2025

HTML बटन होवर प्रभाव उदाहरण

29 September 2025

पृष्ठभूमि छवि के साथ CSS लोडिंग एनीमेशन

HTML

CSS

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
body {
  background-color: #181B27;
  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: 75%;
  left: 50%;
  transform: translate(-50%, -50%);
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 50%;
  overflow: hidden;
  background:transparent;
}

.container {
  position: relative;
  width: 100%;
  height: 100%;
}

.circle {
  position: absolute;
  width: 100px;
  height: 100px;
  border-radius: 50%;
  background-color: #FFD700; /* Cor amarelo ouro */
  animation: fadeInOut 3s infinite alternate;
}

.circle:nth-child(1) {
  left: 50px;
  top: 50px;
  animation-delay: 0s;
}

.circle:nth-child(2) {
  left: 150px;
  top: 150px;
  animation-delay: 0.5s;
}

.circle:nth-child(3) {
  left: 250px;
  top: 50px;
  animation-delay: 1s;
}

.circle:nth-child(4) {
  left: 50px;
  top: 250px;
  animation-delay: 1.5s;
}

@keyframes fadeInOut {
  0% {
    opacity: 1;
  }
  50% {
    opacity: 0.1;  
  }
  100% {
    opacity: 1;
  }
}

अनुशंसित

स्टिक मर्ज गेम HTML5 स्रोत कोड

HTML बटन होवर प्रभाव उदाहरण

पृष्ठभूमि छवि के साथ CSS लोडिंग एनीमेशन

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS