Animation HTML sur l'anxiété : texte clignotant

1,129 byby.createsite

Ouvrir dans l'éditeur Publiez votre code

Animation HTML sur l'anxiété : texte clignotant

Recommandé

27 September 2025

Arrière-plan animé CSS avec formes et texte

16 March 2026

Chargeur HTML du jeu Ragdoll Archers

22 January 2026

Chargeur de jeu HTML5 pour le portage Web de Pizza Tower

HTML

CSS

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
body {
  background-color: #141921; /*  Fundo escuro para realçar a intensidade */
  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;
}

.anxiety-element {
  position: absolute;
  width: 100px;
  height: 100px;
  border-radius: 50%;
  animation: pulse 2s infinite linear;
  background: linear-gradient(to bottom, #9cebff, #48adff);
}

@keyframes pulse {
  0% { transform: scale(1); }
  50% { transform: scale(1.1); }
  100% { transform: scale(1); }
}

.text-flash {
  position: absolute;
  white-space: nowrap;
  font-size: 16px;
  animation: fade 1s infinite alternate;
  color: #fff;
  background: rgba(0, 0, 0, 0.6);
  padding: 5px 10px;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.5);
}

@keyframes fade {
  0% { opacity: 1; }
  50% { opacity: 0.2; }
  100% { opacity: 1; }
}