Extrait HTML d'animation CSS Circle

1046 byby.createsite

Ouvrir dans l'éditeur Publiez votre code

Recommandé

22 November 2025

Formulaire de connexion Liquid Glass HTML CSS

12 August 2025

Extrait de code d'animation CSS Heart

12 July 2025

Effet de lueur de carte 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;
  }
}

Recommandé

Formulaire de connexion Liquid Glass HTML CSS

Extrait de code d'animation CSS Heart

Effet de lueur de carte CSS

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS