émoji dansant

Ouvrir dans l'éditeur Publiez votre code

Recommandé

29 July 2024

Police de caractères dansante

HTML

CSS

body {
  margin: 0;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  background: #000;
  overflow: hidden;
}

.container {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
}

.emoji {
  font-size: 100px;
  animation: dance 1.5s infinite ease-in-out, glitch 0.2s infinite alternate;
}

.text {
  position: absolute;
  bottom: -50px;
  color: #fff;
  font-family: Arial, sans-serif;
  font-size: 24px;
  text-transform: uppercase;
  animation: blink 1.5s infinite;
  text-shadow: 0 0 10px #00ffcc;
}

@keyframes dance {
  0%, 100% { transform: scale(1) rotate(0deg); }
  50% { transform: scale(1.2) rotate(10deg); }
}

@keyframes glitch {
  0% { text-shadow: 2px 0 #ff00ff, -2px 0 #00ffcc; }
  100% { text-shadow: -2px 0 #ff00ff, 2px 0 #00ffcc; }
}

@keyframes blink {
  0%, 50% { opacity: 1; }
  51%, 100% { opacity: 0; }
}

/* Fundo com cores alternantes */
body::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(45deg, #ff00ff, #00ffcc);
  opacity: 0.5;
  animation: colorShift 3s infinite alternate;
}

@keyframes colorShift {
  0% { background: linear-gradient(45deg, #ff00ff, #00ffcc); }
  100% { background: linear-gradient(45deg, #00ffcc, #ff00ff); }
}

émoji dansant

Recommandé

Évaluation des émojis

Évaluation des émojis

Police de caractères dansante

HTML

CSS

JS

Recommandé

Évaluation des émojis

Évaluation des émojis

Police de caractères dansante

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS