Fragmento HTML de animación de círculo CSS

Abrir en el editor Publica tu código

Recomendado

17 December 2023

Rotación del Logotipo de Chrome

2 December 2025

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

Fragmento HTML de animación de círculo CSS

Recomendado

Rotación del Logotipo de Chrome

Deslizarse.IO

Botón de escape

HTML

CSS

JS

Recomendado

Rotación del Logotipo de Chrome

Deslizarse.IO

Botón de escape

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS