Fragmento HTML de animación de círculo CSS

Abrir en el editor Publica tu código

Recomendado

14 October 2023

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

Panel de tarjetas

inicio de sesión 3d

La manecilla de la hora

HTML

CSS

JS

Recomendado

Panel de tarjetas

inicio de sesión 3d

La manecilla de la hora

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS