Trecho HTML de animação de círculo CSS

731 byby.createsite

Abrir no Editor Publique Seu Código

Recomendado

12 August 2025

Animação da barra de carregamento CSS

17 October 2025

Modelo HTML de portfólio de web designer

28 August 2025

Archinova: Estúdio de Arquitetura e Design | Turquia

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

Recomendado

Animação da barra de carregamento CSS

Modelo HTML de portfólio de web designer

Archinova: Estúdio de Arquitetura e Design | Turquia

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS