Un code par codex

1439 codex

Ouvrir dans l'éditeur Video Publiez votre code

Recommandé

6 March 2025

Un code par nasmacadic

HTML

CSS

html, body {
  height: 100%;
}

.content {
  background: #9C27B0;
  animation: hue 10s linear infinite;
  min-height: 100%;
}

.loader {
  position: absolute;
  text-align: center;
  width: 100%;
  height: 2em;
  top: 50%;
  margin-top: -1em;
}
.loader_letter {
  text-transform: uppercase;
  color: #fff;
  font-family: "Helvetica", sans-serif;
  font-weight: bold;
  padding: 0 .2em;
  font-size: 2em;
  line-height: 1;
  position: relative;
  display: inline-block;
  animation: bounce 0.5s cubic-bezier(0.165, 0.84, 0.44, 1) infinite alternate;
}
.loader_letter:nth-child(1) {
  animation-delay: 0s;
}
.loader_letter:nth-child(2) {
  animation-delay: 0.05s;
}
.loader_letter:nth-child(3) {
  animation-delay: 0.1s;
}
.loader_letter:nth-child(4) {
  animation-delay: 0.15s;
}
.loader_letter:nth-child(5) {
  animation-delay: 0.2s;
}
.loader_letter:nth-child(6) {
  animation-delay: 0.25s;
}
.loader_letter:nth-child(7) {
  animation-delay: 0.3s;
}

@keyframes bounce {
  0% {
    transform: translateY(0px);
  }
  100% {
    transform: translateY(-1em);
  }
}
@keyframes hue {
  0% {
    filter: hue-rotate(0deg);
  }
  100% {
    filter: hue-rotate(360deg);
  }
}

Un code par codex

Recommandé

Un code par omer

Un code par alejandrokundrah

Un code par nasmacadic

HTML

CSS

JS

Recommandé

Un code par omer

Un code par alejandrokundrah

Un code par nasmacadic

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS