émoji dansant

1,330 byby.createsite

Ouvrir dans l'éditeur Publiez votre code

Recommandé

18 May 2024

Bascule Emoji

15 June 2025

Police de caractères dansante

18 August 2024

Évaluation des émojis

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