Animazione ansia HTML: testo lampeggiante

Apri nell'Editor Pubblica il Tuo Codice

Consigliato

21 December 2024

Esempio di animazione del pulsante HTML

30 November 2024

* {
  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; }
}

Animazione ansia HTML: testo lampeggiante

Consigliato

testo

Esempio di animazione del pulsante HTML

Testo luminoso

HTML

CSS

JS

Consigliato

testo

Esempio di animazione del pulsante HTML

Testo luminoso

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS