चिंता एनीमेशन HTML: चमकता हुआ पाठ

संपादक में खोलें Video अपना कोड प्रकाशित करें

अनुशंसित

26 September 2025

पृष्ठभूमि छवि के साथ CSS लोडिंग एनीमेशन

22 June 2025

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

चिंता एनीमेशन HTML: चमकता हुआ पाठ

अनुशंसित

पृष्ठभूमि छवि के साथ CSS लोडिंग एनीमेशन

सीएसएस त्रिभुज टॉगल एनीमेशन

घड़ी एनीमेशन

HTML

CSS

JS

अनुशंसित

पृष्ठभूमि छवि के साथ CSS लोडिंग एनीमेशन

सीएसएस त्रिभुज टॉगल एनीमेशन

घड़ी एनीमेशन

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS